微信小程序实现渐入渐出动画效果


Posted in Javascript onJune 13, 2019

前言

在做小程序列表展示的时候,接到了一个需求。需要在列表展示的时候加上动画效果。设计视频效果如下图:

微信小程序实现渐入渐出动画效果

需要在进入列表页的时候,依次展示每一条卡片,在展示完成后需要隐藏掉当天之前的卡片。

实现思路

实现该动画效果,首先需要给每个卡片添加一个css动画。因为每个卡片的显示是有时间间隔的,以及考虑到展示完成后的隐藏效果,所以动画效果需要用js动态去添加。在看了微信开发文档后,发现微信小程序提供了Animation的一个动画对象,具体看了里面的参数后发现,是可以实现需求上的效果的。具体使用如下api:

wx.createAnimation(Object object) 创建一个animation对象。最后通过动画实例的export方法导出动画数据传递给组件的 animation 属性。里面有如下参数:duration(动画持续时间,单位 ms),timingFunction(动画的国度效果),delay(动画延迟)

创建的animation对象,本次实现过程中需要用到如下属性:

Animation.export() 可以导出动画队列,export 方法每次调用后会清掉之前的动画操作。
Animation.step(Object object) 表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。比如一组动画结束了,就以step()结尾
Animation.translateY(number translation) 在 Y 轴平移的距离,单位为 px
Animation.opacity(number value) 透明度 0-1的取值范围

看到上面这些属性,合理使用的话,那么实现需求提到动画效果那是稳稳的。

实现步骤

封装一个方法,用来创建动画,并方便调用

/**
 * 动画实现
 * @method animationShow
 * @param {that} 当前卡片
 * @param {opacity} 透明度
 * @param {delay} 延迟
 * @param {isUp} 移动方向
 */
 animationShow: function (that,opacity, delay, isUp) {
 let animation = wx.createAnimation({
  duration: 1000,
  timingFunction: 'ease',
  delay: delay
 });
 <!--考虑到还需要隐藏掉当天之前的卡片,做如下判断来赋予不同的动画效果-->
 if (isUp == 'down') {
  animation.translateY(0).opacity(opacity).step().translateY(-80).step();
 } else if (isUp == 'up') {
  animation.translateY(0).opacity(opacity).step().translateY(-140).opacity(0).step()
 } else {
  animation.translateY(0).opacity(opacity).step()
 }
 let params = ''
 params = animation.export()
 return params
 },

初始化每个卡片的样式

首先每个卡片的位置相对于自身往Y轴平移80像素,并且把透明度设置为0。这样就可以进入页面的时候再往下平移并且让卡片逐渐显示。

.init{
 opacity: 0;
 transform: translateY(-80px)
}

处理数据

循环处理每一条数据,通过调用封装的方法,来获得该卡片应该拥有的动画属性

for (let i = 0; i < transData.length; i++) {
 if (i == 0) {
  transData[i].animation = that.app.slideupshow(that, 1, 0, 'up')
 } else {
  transData[i].animation = that.app.slideupshow(that, 1, (i + 1) * 10, 'down')
 }
 }

给每个卡片附加animation属性

<view class="init" animation="{{item.animation}}">

实现效果

微信小程序实现渐入渐出动画效果

跟设计视频中的动画风格基本保持一致,美滋滋。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
JQuery中clone方法复制节点
May 18 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
json数据处理及数据绑定
Jan 25 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
JavaScript中Dom操作实例详解
Jul 08 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 #Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 #Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 #Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 #Javascript
深入了解JavaScript代码覆盖
Jun 13 #Javascript
js使用cookie实现记住用户名功能示例
Jun 13 #Javascript
探索JavaScript中私有成员的相关知识
Jun 13 #Javascript
You might like
php图片验证码代码
2008/03/27 PHP
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
PHP Global定义全局变量使用说明
2013/08/15 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
python简单实现刷新智联简历
2016/03/30 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Django分页功能的实现代码详解
2019/07/29 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
Django中ORM找出内容不为空的数据实例
2020/05/20 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
党员教师四风自我剖析材料
2014/09/30 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书