让云朵飘，微信小程序animation循环动画

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

截图如下：

让云朵飘
实现代码：

index.wxml

index.js

onReady: function () {
// 页面渲染完成
// 实例化一个动画
var that = this;
var i = 0
var ii = 0

var animationData = wx.createAnimation({duration: 1000, // 默认为400     动画持续时间，单位mstimingFunction: 'ease-in-out',//transformOrigin: '4px 91px'
});var animationCloudData = wx.createAnimation({duration: 1000, // 默认为400     动画持续时间，单位mstimingFunction: '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);//循环时间 这里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

.clouds{
margin-top:320rpx;
}
.yun1{
width:320rpx;
height: 120rpx;

}
附：参考备用：

/*
var that = this;
// 页面渲染完成
//实例化一个动画
var animation = wx.createAnimation({
duration: 1000,
timingFunction: ‘ease’,
})

this.animation = animationanimation.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秒

}*/

让云朵飘，微信小程序animation循环动画相关推荐

微信小程序animation有趣的自定义动画
这几天在做小程序时遇到了一些问题:想要实现一个答对题目+5秒.答错题目-5秒的提示动画效果,但是关于微信小程序的animation自定义动画自己没有系统的学习过做动画需要我们将一个复杂的动作过程,拆 ...
微信小程序-for循环
微信小程序-for循环通过wx:for可以根据指定的数组,循环渲染重复的组件结构,语法示例如下: <view wx:for="{{arr}}">索引是:{{index ...
php 微信小程序循环多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
微信小程序for循环里面添加input事件
1,在微信小程序for循环里面添加input事件,并把input输入值添加到列表里面 2.wxml <view class="item" wx:for="{{lis ...
微信小程序—for循环包括自定义for循环中的item和index（图文）
微信小程序-for循环包括自定义for循环中的item和index <view wx:for="{{list}}" wx:key="{{index}}"& ...
小程序 | 微信小程序实现循环嵌套数据选择
小程序 | 微信小程序实现循环嵌套数据选择一.效果展示二.代码实现在.wxml文件中,有时从后台传来的数据可能会出现数组嵌套数组的情况,需要利用wx:for嵌套实现数据的展示.这时,外层循环正常 ...
微信小程序登录页动画-云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 当我看到这张背景图的时候, ...
微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...
“完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
"完美"解决微信小程序购物车抛物动画,在连续点击时出现计算错误问题,定时器停不下来. 参考文章: (1)"完美"解决微信小程序购物车抛物动画,在连续点击时出现计 ...

让云朵飘，微信小程序animation循环动画

让云朵飘，微信小程序animation循环动画相关推荐

最新文章

热门文章