React Native 仿抖音點贊特效

前言

任何一款應用無疑都或多或少的使用到動畫效果，它對於提公升使用者體驗有著無比重要的作用。react native同樣提供了豐富的動畫api供開發者呼叫，而對於此部分知識的掌握無疑是rn高階的必經之路，本文通過案例帶大家實踐掌握animated、art等動畫及繪圖知識。

animatedart手勢系統

rn目前已更新至v0.56，其動畫api也在不斷的豐富，其中以animated為主要核心，集中了動畫建立、執行（組合）、運算（插值）、事件等功能。

this.anim1 = new animated.value(0) // 用於單個值
this.anim2 = new animated.valuexy() // 用於向量值
複製**

所謂動畫的執行，實質是改變動畫物件的值，我們可以通過this.anim1.setvalue(1)方法直接賦值，也可以利用animated.timinganimated.springanimated.decay等方法以動畫的方式執行，以timing為例：

animated.timing(
this.anim1,  // 定義的動畫值物件
).start() // 呼叫start方法開始執行
複製**

同時也可以通過parallel（同時執行）、sequence（順序執行）、loop（迴圈執行）、stagger和delay等方法組合動畫，例如：

animated.sequence([            // 首先執行decay動畫，結束後同時執行spring和twirl動畫
animated.decay(position, , // 根據使用者的手勢設定速度
deceleration: 0.997,
}),animated.parallel([          // 在decay之後並行執行：
animated.spring(position,     // 返回到起始點開始
}),animated.timing(twirl, ),
]),]).start();                    // 執行這一整套動畫序列
複製**

animated提供了對動畫值的加、減、乘、除、取模等運算。

animated.add(a, b) // 加
animated.subtract(a, b) // 減 v0.56新增
animated.multiply(a, b) // 乘
animated.divide(a, b) // 除
animated.modulo(a, modulus) // 取模
animated.diffclamp(a, min, max) // 返回乙個介於min和max之間動畫值
複製**

插值也屬於運算的一種方式，可以使用動畫值物件的interpolate方法，進行輸入與輸出的對映. 例如:

this.anim1.interpolate();
複製**

動畫必須作用在特定元件之上，目前animated封裝了image、scrollview、text、view元件並匯出，可以直接通過animated.***的形式使用。對於自定義元件，可以通過createanimatedcomponent方法建立，具體使用見案例部分。

對於連續呼叫的事件，比如使用手勢進行滾動、平移、縮放等操作，可以通過animated.event進行結構化對映，從複雜的事件中提取值並對映到動畫值物件，自動完成setvalue方法的呼叫，例如：

onscroll=}}]
)}複製**

art（ios端需預先引入）是rn提供的繪圖api，主要涵蓋了以下內容：

const  = react.art
複製**

d3-shape 更加方便的繪製路徑

d3-scale 實現抽象的資料對映

react-native-svg 對於熟悉svg開發的同學推薦使用

接下來開始我們的編碼工作，首先實現抖音的雙擊點讚特效

利用手勢系統監聽雙擊事件，拿到當前觸控點的座標值並建立心形元件，元件內部執行放大並降低透明度的動畫，動畫完畢後移除元件。

單獨建立乙個心形元件，其內部完成動畫效果

const rotate_angle = ['-35deg','-25deg','0deg','25deg','35deg']
class
animheart
extends
component
render() = this.props
return
style=),
transform: [)
},]}}
source= 
/>
}  componentdidmount()
),// 使用定時動畫函式
animated.timing(
this.anim,
)]).start(()=>)
}  componentwillunmount()
// 禁止該元件重新渲染，提公升效能
shouldcomponentupdate()}/*
注意: 
動畫序列中，如果第乙個動畫中的usenativedriver設定為true，
此時動畫便交於原生端進行執行，不可再切換為js驅動，後續動畫的usenativedriver也必須設定為true
*/複製**

建立手勢，檢測雙擊事件，根據座標點渲染animheart

class
extends
component
this.tapstarttime = null
this._panresponder = panresponder.create()
}  _onpanrespondergrant = (ev)=> = ev.nativeevent
// 設定位置資料，渲染animheart元件
this.setstate(()=>)
return 
})}  
// 檢測是否為雙擊
isdoubletap()
this.tapstarttime = null
return
true
}  render() 
style=>
, index)=>)=>
})}} 
key= // 不要使用index作為key值
x= y= 
/>})}
view>
);}}
複製**

最終效果如下

React Native 仿抖音點贊特效

仿抖音點贊效果

仿抖音點贊按鈕

雙擊飛小心心仿抖音點贊

React Native 仿抖音點贊特效

仿抖音點贊效果

仿抖音點贊按鈕

雙擊飛小心心 仿抖音點贊

相關推薦

雙擊飛小心心仿抖音點贊