Animation

解释:动画实例可以调用以下方法来描述动画,调用结束后会返回自身,支持链式调用的写法。

普通样式:

属性 参数 说明
opacity value 透明度,参数范围 0~1
backgroundColor color 颜色值
width length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
height length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
top length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
left length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
bottom length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
right length 长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。

# 动画队列

调用动画操作方法后要调用 step() 来表示一组动画完成,可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

# 代码示例 1: 动画队列

    <view class="wrap">
        <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
    </view>
    
    Page({
        data: {
            animationData: {}
        },
        startToAnimate() {
            const animation = swan.createAnimation();
            animation.rotate(90).translateY(10).step();
            animation.rotate(-90).translateY(-10).step();
            this.setData({
                animationData: animation.export()
            });
        }
    });
    

    # 代码示例 2: 动画样式设置

      <view class="wrap">
          <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
      </view>
      
      Page({
          data: {
              animationData: {}
          },
          startToAnimate() {
              const animation = swan.createAnimation({
                  transformOrigin: '50% 50%',
                  duration: 1000,
                  timingFunction: 'linear',
                  delay: 0
              });
              animation.opacity(0.5);
              animation.backgroundColor('#DC143C');
              animation.rotate(90).translateY(10).step();
              animation.rotate(-90).translateY(-10).step();
              this.setData({
                  animationData: animation.export()
              });
              console.log('createAnimation', animation);
          }
      });
      
      

      # 代码示例 3: 动画宽高设置

        <view class="wrap">
            <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
        </view>
        
        Page({
            data: {
                animationData: {}
            },
            startToAnimate() {
                const animation = swan.createAnimation({
                    transformOrigin: '50% 50%',
                    duration: 1000,
                    timingFunction: 'linear',
                    delay: 0
                });
                animation.opacity(0.5);
                animation.backgroundColor('#DC143C');
                animation.width('20px');
                animation.height('70px');
                animation.top('40px');
                animation.left('90px');
                animation.bottom('60px');
                animation.right('80px');
                animation.rotate(90).translateY(10).step();
                animation.rotate(-90).translateY(-10).step();
                this.setData({
                    animationData: animation.export()
                });
                console.log('createAnimation', animation);
            }
        });
        

        # 代码示例 4: 底部弹窗自定义动画(css 控制)

          <button bindtap="showshadow" type="primary">点击显示底部弹框</button>
           
          <view class="content {{click? 'showContent': 'hideContent'}} {{option? 'open': 'close'}}" hover-stop-propagation="true">
              <!-- 内容 -->
              <view class="content-top" s-for="item in list">
                {{item}}
              </view>
          </view>
          
          Page({
              data: {
                  click: false, // 是否显示弹窗内容
                  option: false, // 是否显示弹窗或关闭弹窗的操作动画
                  list: ['列表一','列表二','列表三','列表四']
              },
              showshadow() {
                  if (!this.data.click) {
                      this.setData({
                          click: true,
                      })
                  }
                  if (this.data.option) {
                      this.setData({
                          option: false,
                      })
                      // 关闭显示弹窗动画的内容,若不设则点击任何地方,都会出现弹窗
                      setTimeout(() => {
                          this.setData({
                              click: false,
                          })
                      }, 500)
                  } else {
                      this.setData({
                          option: true
                      })
                  }
              }
          });
          
          
          .content {
              width: 100%;
              position: absolute;
              bottom: 0;
              box-shadow: 0 0 10rpx #333;
              height: 0;
              z-index: 999;
              font-size: 28.99rpx;
          }
           
          .showContent {
              display: block;
          }
           
          .hideContent {
              display: none;
          }
          
          /* 显示或关闭内容时动画 */
          .open {
              animation: slideContentUp 0.5s ease-in both;
          }
           
          .close {
              animation: slideContentDown 0.5s ease-in both;
          }
           
          /* 弹出或关闭动画来动态设置内容高度 */
          @keyframes slideContentUp {
              from {
                  height: 0;
              }
          
              to {
                  height: 800rpx;
              }
          }
           
          @keyframes slideContentDown {
              from {
                  height: 800rpx;
              }
          
              to {
                  height: 0;
              }
          }
          
          

          # 代码示例 5: 底部弹窗自定义动画(API 控制)

            <view class="wrap">
                <button bindtap="showShadow" type="primary">点击显示底部弹框</button>
                
                <!-- 遮罩层 -->
                <view class="shadow" s-if="{{chooseSize}}" bindtap="hideModal"></view>
                <!-- 上滑高度 -->
                <view class="choosen" s-if="{{chooseSize}}" animation="{{animationData}}">
                <!-- 内容 -->
                <view class="content-top" s-for="item in list">
                    {{item}}
                </view>
            </view>
            
            Page({
                data:{
                    chooseSize: false,
                    list: ['列表一','列表二','列表三','列表四']
                },
                showShadow(e){
                    this.data.chooseSize ? this.hideModal() : this.chooseSezi();
                },
                chooseSezi() {
                    // 创建一个动画实例
                    let animation = swan.createAnimation({
                        transformOrigin: "50% 50%",
                        duration: 1000,
                        timingFunction: "ease",
                        delay: 0
                    });
            
                    animation.translateY(1000).step();
                    this.setData({
                        animationData: animation.export(),
                        chooseSize: true
                    })
                    // 设置setTimeout来改变y轴偏移量,实现有感觉的滑动 滑动时间
                    setTimeout(() => {
                        animation.translateY(0).step();
                        this.setData({
                            animationData: animation.export(),
                            clearcart: false
                        })
                    }, 100);
                },
                // 隐藏
                hideModal(e) {
                    let animation = swan.createAnimation({
                        transformOrigin: "50% 50%",
                        duration: 1000,
                        timingFunction: "ease",
                        delay: 0
                    })
            
                    animation.translateY(700).step();
                    this.setData({
                        animationData: animation.export()
                    })
                    setTimeout(() => {
                        animation.translateY(0).step();
                        this.setData({
                            animationData: animation.export(),
                            chooseSize: false
                        })
                    }, 500);
                }
            });
            
            

            # 代码示例 6: 弹出菜单特效的实现

              <view>
                  <image src="/images/ai.png" class="image" animation="{{animFavor}}"></image>
                  <image src="/images/basecontent.png" class="image" animation="{{animShare}}"></image>
                  <image src="/images/canvas.png" class="image" animation="{{animWrite}}"></image>
                  <image src="/images/interface.png" class="image-plus" animation="{{animPlus}}" bindtap="isPopping"></image>
              </view>
              
              Page({
                  data: {
                      isPopping: false,
                      animPlus: {},
                      animFavor: {},
                      animShare: {},
                      animWrite: {},
                  },
                  isPopping () {
                      if (this.data.isPopping) {
                          this.pop();
                          this.setData({
                              isPopping: false
                          })
                      } else {
                          this.popBack();
                          this.setData({
                              isPopping: true
                          })
                      }
                  },
                  pop() {
                      let animationPlus = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      let animFavor = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      let animShare = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      let animWrite = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      animationPlus.rotateZ(180).step();
                      animFavor.translate(-100, -100).rotateZ(180).opacity(1).step();
                      animShare.translate(-140, 0).rotateZ(180).opacity(1).step();
                      animWrite.translate(-100, 100).rotateZ(180).opacity(1).step();
                      this.setData({
                          animPlus: animationPlus.export(),
                          animFavor: animFavor.export(),
                          animShare: animShare.export(),
                          animWrite: animWrite.export()
                      })
                  },
                  popBack() {
                      let animationPlus = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      let animFavor = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      let animShare = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      let animWrite = swan.createAnimation({
                          duration: 500,
                          timingFunction: 'ease-out'
                      })
                      animationPlus.rotateZ(0).step();
                      animFavor.translate(0, 0).rotateZ(0).opacity(0).step();
                      animShare.translate(0, 0).rotateZ(0).opacity(0).step();
                      animWrite.translate(0, 0).rotateZ(0).opacity(0).step();
                      this.setData({
                          animPlus: animationPlus.export(),
                          animFavor: animFavor.export(),
                          animShare: animShare.export(),
                          animWrite: animWrite.export()
                      })
                  }
              })
              
              
              .image {
                  height: 150rpx;
                  width: 150rpx;
                  position: absolute;
                  bottom: 250rpx;
                  right: 100rpx;
                  opacity: 0;
              }
              
              .image-plus {
                  height: 150rpx;
                  width: 150rpx;
                  position: absolute;
                  bottom: 250rpx;
                  right: 100rpx;
                  z-index: 100;
              }