小程序X轴渐入动画组件
先定义小程序中要施加渐入动画的DOM元素，注意该元素的css样式里要添加下opaction属性，通常设为0，意为从全透明开始渐入。另外还需要根据实际场景设定该元素的left或right值，以供动画方法定义滑动距离。
<view class="animation-class" animation="slideleft">向左滑入渐入动画DOM元素</view>定义小程序内公共动画方法
// animation.js
/**
* X轴滑动渐入动画
*/
function fadeXAnimation( _this, param, px, opacity ){
let animation = wx.createAnimation({
duration: 800,
timingFunction: "ease"
})
animation.translateX( px ).opacity( opacity ).step();
// 将param转换为key
let json = '{"'+ param +'":""}';
json = JSON.parse( json );
json[param] = animation.export();
// 设置动画
_this.setData( json );
}
module.exports = {
fadeXAnimation: fadeXAnimation
}业务代码js中引入公共动画方法js文件，并选择符合自身业务场景的地方调用动画方法，这里我选择onshow生命周期内执行动画方法，另外也可以将该方法放到定时器中延时执行或在wx.createAnimation方法中定义delay延时。
// index.js
const animation = require('../../utils/tools/animation.js')
onshow(){
animation.fadeXAnimation(this, "slide_left_locks", -100, 1);
}可以在此基础上，添加Y轴渐入、渐出等动画。微信小程序动画API还支持旋转、放大等，方法的套路都差不多。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-05-07，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读