建站
咨詢
售后
建站咨詢
新聞中心
小編給大家分享一下如何使用RN Animated做一個“添加購物車”動畫，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)從2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元烏蘭察布做網(wǎng)站,已為上家服務(wù),為烏蘭察布各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
最近在選座的新項目中試用了一下 React Native，熟悉新框架的同時，可以略微將交互效果和 Native 看齊了。
分享一下項目本身比較重要的一個交互動畫的做法, RT。
這次我們就不裝大象了，因為我真的買了冰箱 =,=
本著言簡意賅，不故弄玄虛的原則，依然是三步：
第 1 步：通過 Animated 創(chuàng)建合成動畫的 View。仔細觀察，“選擇座位” 動畫和 “添加購物車” 動畫類似，都可以分解為透明度變化（ opacity ）和 3D 變化（ transform ）兩部分。而 transform 又能進一步分解為水平位移（ translateX ）、垂直位移（ translateY ）、旋轉(zhuǎn)（ rotateZ ）、縮放（ scale ）四個分動畫（ 代碼見 render()）；
第 2 步：響應點擊事件，準備好動畫的相關(guān)參數(shù)。目標位置被點擊時，在動畫的父級組件中通過 onPress 事件的 event 對象獲取點擊的位置坐標（ event.nativeEvent.changedTouches[0].pageX|Y ）作為動畫起始位置。終點位置一般為固定位置，當然你也可以指定動態(tài)值；
第 3 步：獲取參數(shù)， start() 播放動畫（ 代碼見 componentDidMount()）。從父級組件中獲取位置參數(shù)并通過 props 傳入子動畫組件。其中 opacity 、 rotateZ 、 scale 屬性值都是靜態(tài)變化，分別為 1 -> 0 0deg -> 360deg 1 -> 0 （可以利用 interpolate 方法做各個屬性不同類型值的 mapping，更加方便統(tǒng)一控制）；
注意：類似的全局動畫要展示在最高層級，防止被后渲染的組件遮擋，最好單獨封裝組建提升其在 UI 中的渲染層級。
import React from 'react';
import {
StyleSheet,
View,
Image,
Animated
} from 'react-native';
export default class SeatDroppingextends React.PureComponent{
constructor (props) {
super(props);
this.state = {
animValue: new Animated.Value(0),
fromPageX: props.clickedPosition.x, // from event.nativeEvent.changedTouches[0]
fromPageY: props.clickedPosition.y,
toPageX: props.psgPosition.x,
toPageY: props.psgPosition.y
};
}
componentDidMount() {
Animated.timing(
this.state.animValue,
{
toValue: 1,
duration: 600
}
).start();
}
render () {
const {
animValue,
fromPageX,
fromPageY,
toPageX,
toPageY
} = this.state;
return (
);
}
}以上是“如何使用RN Animated做一個“添加購物車”動畫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：如何使用RNAnimated做一個“添加購物車”動畫
網(wǎng)站地址：http://ef60e0e.cn/article/gciodi.html
