登录/注册

QQ

微博

首页 文章 【微信小程序开发教程】animation循环动画效果--让云朵飘

【微信小程序开发教程】animation循环动画效果--让云朵飘

文章来源:http://xcx.9.cn/

微信小程序小程序开发

2017-07-16

2515

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


截图如下:

小程序动画云朵飘


实现代码:

index.wxml

<view class="clouds">

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

    </view>


index.js

 onReady: function () {

    // 页面渲染完成

    // 实例化一个动画

    var that = this;

    var i = 0

    var ii = 0


    var animationData = wx.createAnimation({

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

      timingFunction: 'ease-in-out',

      //transformOrigin: '4px 91px'

    });


    var animationCloudData = wx.createAnimation({

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

      timingFunction: 'ease-in-out',

      //transformOrigin: '4px 91px'

    });


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

    // 循环执行代码

    //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);//循环时间 这里10001

    */


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

    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

.clouds{

  margin-top:320rpx;

}

.yun1{

  width:320rpx;

  height: 120rpx;


}

附:参考备用:


/*

    var that = this;

    // 页面渲染完成

    //实例化一个动画

    var animation = wx.createAnimation({

      duration: 1000,

      timingFunction: 'ease',

    })


    this.animation = animation


    animation.scale(2, 2).rotate(45).step().scale(1,1).step();


    //导出动画

    this.setData({

      animationData: animation.export()

    })


    var i = 0;

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

    /*setTimeout(function () {

      that.setData({

        animationData: animation.export()

      });


      i++;

      console.log(i);

    }, 1000);*/


    /*setInterval(function () {

      //循环执行代码

        that.setData({

          animationData: animation.export()

        });


      i++;

      console.log(i);

    }, 1000) //循环时间 这里是1  


  }*/

第九程序公众号二维码

评论

关注我们 发布

发布小程序

文章投稿

提交

下载

手机访问

扫一扫体验小程序

Copyright © 2017 9.cn 微信小程序商店 闽ICP备13017663号-12 厦门云游数码科技有限公司 版权所有

扫一扫关注我们

手机访问