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


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的Ajax时无响应数据的解决方法
May 25 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
Angular2安装angular-cli
May 21 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 Javascript
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 06 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
vue实现的下拉框功能示例
2019/01/29 Javascript
说说Vuex的getters属性的具体用法
2019/04/15 Javascript
详解50行代码,Node爬虫练手项目
2019/04/22 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[49:08]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
浅析Python打包时包含静态文件处理方法
2021/01/15 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
文化与传播毕业生求职信
2014/03/09 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
向雷锋同志学习倡议书
2015/04/27 职场文书
党小组考察意见
2015/06/02 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
Ajax是什么?Ajax高级用法之Axios技术
2021/04/21 Javascript
golang生成并解析JSON
2022/04/14 Golang