阅读 15

记一次微信小程序动画实现

网易考拉App个人主页有一个交互效果是这样的



于是乎产品大佬就问我能不能在小程序那里实现这样的功能?

我心一想这个东西怎么实现啊,难道又要在每次滑动页面的时候不断的判断值然后setData?

1.滚动事件还有滑动事件里setData这个坑我试过了而且很深,现在打死都不往里面跳了。

2.写个canvas?这东西我没写过不会啊。再次倒在没有技术的痛之中。


但是不折腾的前端跟咸鱼有什么区别,App的交互做不了我自己写个类似的动画还不行吗?

于是踏上模仿网易考拉这个动画的征途中~~~

先分析下这个需求,边下拉边改变宽度这我们是做不了了(不是做不了而是做出来巨卡),但是我们可以在判断滑动方向还有距离在滑动结束的时候处理动画,动画的效果是先增大盒子高度然后还原:

1.判断滑动方向(上滑还是下滑),定义开始执行动画的滑动距离

2.下拉屏幕,改变盒子高度显示完整图片

3.松开屏幕盒子变回原始高度

下面我们根据步骤执行

判断滑动方向

直接上代码



其中animatelock是为了防抖,防抖这个东西虽说是有点鸡肋但是必有时候写上也是不错的。

下拉/上拉屏幕,改变盒子高度

首先定义一个小程序的动画,官方文档先放着,避免大伙搜索了。

const changeHeightAnimation = value =>{ 
  let animation = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-out'
  })  
  animation.height(value[0]).step().height(value[1]).step()  
  return animation.export()
}复制代码

为了方便管理我的所有动画是在一个独立的js文件上写的然后在需要的地方引入就行

import { changeHeightAnimation } from '../../utils/util.js'复制代码

下滑/上拉达到条件


在wxml上


接下来看疗效:



总体上看效果还行,在安卓和ios上兼容性也很好。那就这样吧

如果大伙有什么其他方式实现这个效果可以一起交流交流,对我的文章有什么不对的地方也欢迎指正~~~


关注下面的标签,发现更多相似文章
评论