Animation

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

普通样式:

属性参数说明
opacityvalue透明度,参数范围 0~1
backgroundColorcolor颜色值
widthlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
heightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
toplength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
leftlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
bottomlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。
rightlength长度值,如果传入 Number 则默认使用 px,可传入其他自定义单位的长度值。

动画队列

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

示例

扫码体验

Animation - 图1请使用百度APP扫码

图片示例

Animation - 图2

Animation - 图3

Animation - 图4

代码示例1 - 动画队列

在开发者工具中预览效果

  1. <view class="wrap">
  2. <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2. data: {
  3. animationData: {}
  4. },
  5. startToAnimate() {
  6. const animation = swan.createAnimation();
  7. animation.rotate(90).translateY(10).step();
  8. animation.rotate(-90).translateY(-10).step();
  9. this.setData({
  10. animationData: animation.export()
  11. });
  12. }
  13. });

代码示例2 - 动画样式设置

在开发者工具中预览效果

  1. <view class="wrap">
  2. <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2. data: {
  3. animationData: {}
  4. },
  5. startToAnimate() {
  6. const animation = swan.createAnimation({
  7. transformOrigin: "50% 50%",
  8. duration: 1000,
  9. timingFunction: "linear",
  10. delay: 0
  11. });
  12. animation.opacity(0.5);
  13. animation.backgroundColor('#DC143C');
  14. animation.rotate(90).translateY(10).step();
  15. animation.rotate(-90).translateY(-10).step();
  16. this.setData({
  17. animationData: animation.export()
  18. });
  19. console.log('createAnimation', animation);
  20. }
  21. });

代码示例3 - 动画宽高设置

在开发者工具中预览效果

  1. <view class="wrap">
  2. <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view>
  3. </view>
  1. Page({
  2. data: {
  3. animationData: {}
  4. },
  5. startToAnimate() {
  6. const animation = swan.createAnimation({
  7. transformOrigin: "50% 50%",
  8. duration: 1000,
  9. timingFunction: "linear",
  10. delay: 0
  11. });
  12. animation.opacity(0.5);
  13. animation.backgroundColor('#DC143C');
  14. animation.width('20px');
  15. animation.height('70px');
  16. animation.top('40px');
  17. animation.left('90px');
  18. animation.bottom('60px');
  19. animation.right('80px');
  20. animation.rotate(90).translateY(10).step();
  21. animation.rotate(-90).translateY(-10).step();
  22. this.setData({
  23. animationData: animation.export()
  24. });
  25. console.log('createAnimation', animation);
  26. }
  27. });

代码示例5 - 底部弹窗自定义动画(css控制)

在开发者工具中预览效果

  1. <button bindtap='showshadow' type="primary">点击显示底部弹框</button>
  2. <view class='content {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
  3. <!-- 内容 -->
  4. <view class='content-top' s-for="item in list">
  5. {{item}}
  6. </view>
  7. </view>
Page({
    data: {
        click: false, //是否显示弹窗内容
        option: false, //是否显示弹窗或关闭弹窗的操作动画
        list: ['列表一','列表二','列表三','列表四']
    },
    showshadow() {
        let that = this;
        if (!that.data.click) {
            that.setData({
                click: true,
            })
        }
        if (that.data.option) {
            that.setData({
                option: false,
            })
            // 关闭显示弹窗动画的内容,若不设则点击任何地方,都会出现弹窗
            setTimeout(() => {
                that.setData({
                    click: false,
                })
            }, 500)
        } else {
            that.setData({
                option: true
            })
        }
    }
});
.content {
  width: 100%;
  position: absolute;
  bottom: 0;
  box-shadow: 0 0 10rpx #333;
  height: 0;
  z-index: 999;
  font-size: 16px;
}

.showContent {
  display: block;
}

.hideContent {
  display: none;
}

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideContentUp {
  from {
    height: 0;
  }

  to {
    height: 800rpx;
  }
}

@keyframes slideContentDown {
  from {
    height: 800rpx;
  }

  to {
    height: 0;
  }
}

/* 显示或关闭内容时动画 */

.open {
  animation: slideContentUp 0.5s ease-in both;
}

.close {
  animation: slideContentDown 0.5s ease-in both;
}

代码示例6 - 底部弹窗自定义动画(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:function(e){
        if (this.data.chooseSize == false) {
            this.chooseSezi()
        } else {
            this.hideModal()
        }
    },
    chooseSezi() {
        var that = this;
        // 创建一个动画实例
        var animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        })

        animation.translateY(1000).step()
        that.setData({
            animationData: animation.export(),
            chooseSize: true
        })
        // 设置setTimeout来改变y轴偏移量,实现有感觉的滑动 滑动时间
        setTimeout(function () {
            animation.translateY(0).step()
            that.setData({
                animationData: animation.export(),
                clearcart: false
            })
        }, 100)
    },
    // 隐藏
    hideModal: function (e) {
        var that = this;
        var animation = swan.createAnimation({
            transformOrigin: "50% 50%",
            duration: 1000,
            timingFunction: "ease",
            delay: 0
        })

        animation.translateY(700).step()
        that.setData({
            animationData: animation.export()
        })
        setTimeout(function () {
            animation.translateY(0).step()
            that.setData({
                animationData: animation.export(),
                chooseSize: false
            })
        }, 500)
    }
});

代码示例7 - 弹出菜单特效的实现

在开发者工具中预览效果

<view>
    <image src="/images/ai.png" class="img" animation="{{animFavor}}"></image>
    <image src="/images/basecontent.png" class="img" animation="{{animShare}}"></image>
    <image src="/images/canvas.png" class="img" animation="{{animWrite}}"></image>
    <image src="/images/interface.png" class="img-plus" animation="{{animPlus}}" bindtap="isPoping"></image>
</view>
Page({
    data: {
        isPopping: false,
        animPlus: {},
        animFavor: {},
        animShare: {},
        animWrite: {},
    },
    isPoping () {
        if (this.data.isPopping) {
            this.pop();
            this.setData({
                isPopping: false
            })
        } else {
            this.back();
            this.setData({
                isPopping: true
            })
        }
    },
    pop () {
        var animationPlus = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        var animFavor = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        var animShare = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        var 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(),
        })
    },
    back() {
        var animationPlus = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        var animFavor = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        var animShare = swan.createAnimation({
            duration: 500,
            timingFunction: 'ease-out'
        })
        var 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(),
        })
    }
})