animation 实现云朵飘动动画的实例与教程

why 287 2025-07-12 21:42:53

本文实例讲述了微信小程序开发之animation循环动画实现的让云朵飘效果。

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画操作

微信小程序提供了实现动画的api——animation,但却不能循环播放,都是一次性的,动完就Over了,下面提供一个用微信小程序的animation来实现循环动画的玩具,抛砖引玉,希望大家能想出更好的方法来实现真正的循环。说是玩具是因为这个循环动画通过js脚本的setInterval来实现的,但'setInterval'在实际运行中会出现越来越严重的延迟,这是由于js的单线程运行模式所决定的(具体可以搜本关资料看),所以动画间隙并不是那么流畅,所以先玩玩吧,让我们来实现让云朵飘……

截图如下:

image.png

实现代码:

index.wxml

1

2

3

<view class="clouds">

   <image animation="{{animationCloudData}}" class="yun1" src="../../img/yun1.png"></image>

  </view>

index.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

onReady: function () {

  // 页面渲染完成

  // 实例化一个动画

  var that = this;

  var i = 0

  var ii = 0

  var animationData = wx.createAnimation({

   duration: 1000, // 默认为400   动画持续时间,单位ms

   timingFunction: &#39;ease-in-out&#39;,

   //transformOrigin: &#39;4px 91px&#39;

  });

  var animationCloudData = wx.createAnimation({

   duration: 1000, // 默认为400   动画持续时间,单位ms

   timingFunction: &#39;ease-in-out&#39;,

   //transformOrigin: &#39;4px 91px&#39;

  });

  // 顺序执行,当已经执行完上面的代码就会开启定时器

  // 循环执行代码

  //dotAnFun = setInterval(function () {}); 

  /*setInterval(function () {

   // 动画脚本定义

   //animationData.rotate(6 * (++i)).step()

   //animationData.scale(2, 2).rotate(45).step().scale(1, 1).step();

   animationData.translateY(10).step({ duration: 500 }).translateY(-10).step({ duration: 500 });

   // 更新数据

   that.setData({

    // 导出动画示例

    animationData: animationData.export(),

    //animationCloudData: animationCloudData.export(),   

   })

   ++i;

   console.log(i);

  }.bind(that), 2000);//循环时间 这里1000是1秒

  */

  //动画的脚本定义必须每次都重新生成,不能放在循环外

  animationCloudData.translateX(200).step({ duration: 5000 }).translateX(0).step({ duration: 5000 });

  // 更新数据

  that.setData({

   // 导出动画示例

   //animationData: animationData.export(),

   animationCloudData: animationCloudData.export(),

  })

  setInterval(function () {

   //动画的脚本定义必须每次都重新生成,不能放在循环外

   animationCloudData.translateX(300).step({ duration: 5000 }).translateX(-100).step({ duration: 5000 });

   // 更新数据

   that.setData({

    // 导出动画示例

    //animationData: animationData.export(),

    animationCloudData: animationCloudData.export(),

   })

   ++ii;

   console.log(ii);

  }.bind(that),10000);//3000这里的设置如果小于动画step的持续时间的话会导致执行一半后出错

}

index.wxss

1

2

3

4

5

6

7

.clouds{

 margin-top:320rpx;

}

.yun1{

 width:320rpx;

 height: 120rpx;

}

以上就是animation实现让云朵飘的动画实例的详细内容。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:主数据项目交付最佳实践
下一篇:小程序代码自动迭代的趋势与挑战,如何提升开发效率
相关文章