記一次微信小程序動畫實現

網易考拉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上兼容性也很好。那就這樣吧

若是大夥有什麼其餘方式實現這個效果能夠一塊兒交流交流，對個人文章有什麼不對的地方也歡迎指正~~~