Animation

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

动画队列

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

示例

扫码体验

请使用百度APP扫码

图片示例

代码示例1 - 动画队列

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. 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 - 动画样式设置

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. 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 - 动画宽高设置

在开发者工具中预览效果

  1. <view class="wrap">    <view class="anim" bindtap="startToAnimate" animation="{{animationData}}"></view></view>
  1. 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);    }});

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

在开发者工具中预览效果

  1. <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>
  1. Page({
  2.     data: {
  3.         click: false, //是否显示弹窗内容
  4.         option: false, //是否显示弹窗或关闭弹窗的操作动画
  5.         list: ['列表一','列表二','列表三','列表四']
  6.     },
  7.     showshadow() {
  8.         let that = this;
  9.         if (!that.data.click) {
  10.             that.setData({
  11.                 click: true,
  12.             })
  13.         }
  14.         if (that.data.option) {
  15.             that.setData({
  16.                 option: false,
  17.             })
  18.             // 关闭显示弹窗动画的内容，若不设则点击任何地方，都会出现弹窗
  19.             setTimeout(() => {
  20.                 that.setData({
  21.                     click: false,
  22.                 })
  23.             }, 500)
  24.         } else {
  25.             that.setData({
  26.                 option: true
  27.             })
  28.         }
  29.     }
  30. });
  1. .content {
  2.   width: 100%;
  3.   position: absolute;
  4.   bottom: 0;
  5.   box-shadow: 0 0 10rpx #333;
  6.   height: 0;
  7.   z-index: 999;
  8.   font-size: 16px;
  9. }
  11. .showContent {
  12.   display: block;
  13. }
  15. .hideContent {
  16.   display: none;
  17. }
  19. /* 弹出或关闭动画来动态设置内容高度 */
  21. @keyframes slideContentUp {
  22.   from {
  23.     height: 0;
  24.   }
  26.   to {
  27.     height: 800rpx;
  28.   }
  29. }
  31. @keyframes slideContentDown {
  32.   from {
  33.     height: 800rpx;
  34.   }
  36.   to {
  37.     height: 0;
  38.   }
  39. }
  41. /* 显示或关闭内容时动画 */
  43. .open {
  44.   animation: slideContentUp 0.5s ease-in both;
  45. }
  47. .close {
  48.   animation: slideContentDown 0.5s ease-in both;
  49. }

代码示例6 - 底部弹窗自定义动画（API控制）

在开发者工具中预览效果

  1. <view class="wrap">
  2.     <button bindtap='showshadow' type="primary">点击显示底部弹框</button>
  3.     <!-- 遮罩层 -->
  4.     <view class="shadow" s-if="{{chooseSize}}" bindtap='hideModal'></view>
  5.     <!-- 上滑高度 -->
  6.     <view class='choosen' s-if="{{chooseSize}}" animation='{{animationData}}'>
  7.     <!-- 内容 -->
  8.     <view class='content-top' s-for="item in list">
  9.         {{item}}
  10.     </view>
  11. </view>
  1. Page({
  2.     data:{
  3.         chooseSize: false,
  4.         list: ['列表一','列表二','列表三','列表四']
  5.     },
  6.     showshadow:function(e){
  7.         if (this.data.chooseSize == false) {
  8.             this.chooseSezi()
  9.         } else {
  10.             this.hideModal()
  11.         }
  12.     },
  13.     chooseSezi() {
  14.         var that = this;
  15.         // 创建一个动画实例
  16.         var animation = swan.createAnimation({
  17.             transformOrigin: "50% 50%",
  18.             duration: 1000,
  19.             timingFunction: "ease",
  20.             delay: 0
  21.         })
  23.         animation.translateY(1000).step()
  24.         that.setData({
  25.             animationData: animation.export(),
  26.             chooseSize: true
  27.         })
  28.         // 设置setTimeout来改变y轴偏移量，实现有感觉的滑动 滑动时间
  29.         setTimeout(function () {
  30.             animation.translateY(0).step()
  31.             that.setData({
  32.                 animationData: animation.export(),
  33.                 clearcart: false
  34.             })
  35.         }, 100)
  36.     },
  37.     // 隐藏
  38.     hideModal: function (e) {
  39.         var that = this;
  40.         var animation = swan.createAnimation({
  41.             transformOrigin: "50% 50%",
  42.             duration: 1000,
  43.             timingFunction: "ease",
  44.             delay: 0
  45.         })
  47.         animation.translateY(700).step()
  48.         that.setData({
  49.             animationData: animation.export()
  50.         })
  51.         setTimeout(function () {
  52.             animation.translateY(0).step()
  53.             that.setData({
  54.                 animationData: animation.export(),
  55.                 chooseSize: false
  56.             })
  57.         }, 500)
  58.     }
  59. });

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

在开发者工具中预览效果

  1. <view>
  2.     <image src="/images/ai.png" class="img" animation="{{animFavor}}"></image>
  3.     <image src="/images/basecontent.png" class="img" animation="{{animShare}}"></image>
  4.     <image src="/images/canvas.png" class="img" animation="{{animWrite}}"></image>
  5.     <image src="/images/interface.png" class="img-plus" animation="{{animPlus}}" bindtap="isPoping"></image>
  6. </view>
  1. Page({
  2.     data: {
  3.         isPopping: false,
  4.         animPlus: {},
  5.         animFavor: {},
  6.         animShare: {},
  7.         animWrite: {},
  8.     },
  9.     isPoping () {
  10.         if (this.data.isPopping) {
  11.             this.pop();
  12.             this.setData({
  13.                 isPopping: false
  14.             })
  15.         } else {
  16.             this.back();
  17.             this.setData({
  18.                 isPopping: true
  19.             })
  20.         }
  21.     },
  22.     pop () {
  23.         var animationPlus = swan.createAnimation({
  24.             duration: 500,
  25.             timingFunction: 'ease-out'
  26.         })
  27.         var animFavor = swan.createAnimation({
  28.             duration: 500,
  29.             timingFunction: 'ease-out'
  30.         })
  31.         var animShare = swan.createAnimation({
  32.             duration: 500,
  33.             timingFunction: 'ease-out'
  34.         })
  35.         var animWrite = swan.createAnimation({
  36.             duration: 500,
  37.             timingFunction: 'ease-out'
  38.         })
  39.         animationPlus.rotateZ(180).step();
  40.         animFavor.translate(-100, -100).rotateZ(180).opacity(1).step();
  41.         animShare.translate(-140, 0).rotateZ(180).opacity(1).step();
  42.         animWrite.translate(-100, 100).rotateZ(180).opacity(1).step();
  43.         this.setData({
  44.             animPlus: animationPlus.export(),
  45.             animFavor: animFavor.export(),
  46.             animShare: animShare.export(),
  47.             animWrite: animWrite.export(),
  48.         })
  49.     },
  50.     back() {
  51.         var animationPlus = swan.createAnimation({
  52.             duration: 500,
  53.             timingFunction: 'ease-out'
  54.         })
  55.         var animFavor = swan.createAnimation({
  56.             duration: 500,
  57.             timingFunction: 'ease-out'
  58.         })
  59.         var animShare = swan.createAnimation({
  60.             duration: 500,
  61.             timingFunction: 'ease-out'
  62.         })
  63.         var animWrite = swan.createAnimation({
  64.             duration: 500,
  65.             timingFunction: 'ease-out'
  66.         })
  67.         animationPlus.rotateZ(0).step();
  68.         animFavor.translate(0, 0).rotateZ(0).opacity(0).step();
  69.         animShare.translate(0, 0).rotateZ(0).opacity(0).step();
  70.         animWrite.translate(0, 0).rotateZ(0).opacity(0).step();
  71.         this.setData({
  72.             animPlus: animationPlus.export(),
  73.             animFavor: animFavor.export(),
  74.             animShare: animShare.export(),
  75.             animWrite: animWrite.export(),
  76.         })
  77.     }
  78. })