介绍 import React 得到& # 39;反应# 39;;
import {
,样式表,
,看来,
,形象,
,动画
},得到& # 39;react-native& # 39;;
export default class SeatDroppingextends React.PureComponent {
,constructor (道具),{
超级才能(道具);
this.state 才能=,{
,,,animValue: new Animated.Value (0)
,,,fromPageX: props.clickedPosition.x,,//,得到event.nativeEvent.changedTouches [0]
,,,fromPageY: props.clickedPosition.y,
,,,toPageX: props.psgPosition.x,
,,toPageY: props.psgPosition.y
,,};
,}
,componentDidMount (), {
Animated.timing才能(
,,this.state.animValue,
,,{
,,,toValue:, 1,
,,,时间:600年
,,}
)才能.start ();
,}
,render (), {
const {才能
,,animValue,
,,fromPageX,
,,fromPageY,
,,toPageX,
toPageY。才能
,,},=,this.state;
return 才能;
& lt; Animated.View。才能
,,,风格={{
,,,,zIndex:, 9日
,,,,位置:,& # 39;绝对# 39;
,,,,不透明度:,animValue.interpolate ({
,,,,,inputRange:, [0, 1],
,,,,,outputRange:, (1, 0)
,,,,}),
,,,,变换:,
,,,,,{
,,,,,,translateX:, animValue.interpolate ({
,,,,,,,inputRange:, [0, 1],
,,,,,,,outputRange:, (“$ {fromPageX} px ', ' $ {toPageX} px ']
,,,,,,})
,,,,,},
,,,,,{
,,,,,,translateY:, animValue.interpolate ({
,,,,,,,inputRange:, [0, 1],
,,,,,,,outputRange:, (“$ {fromPageY} px ', ' $ {toPageY} px ']
,,,,,,})
,,,,,},
,,,,,{
,,,,,,rotateZ:, animValue.interpolate ({
,,,,,,,inputRange:, [0, 1],
,,,,,,,outputRange:,(& # 39; 0度# 39;,,& # 39;180度# 39;】
,,,,,,})
,,,,,},
,,,,,{
,,,,,,:,animValue.interpolate ({
,,,,,,,inputRange:, [0, 1],
,,,,,,,outputRange:, (1, 0)
,,,,,,})
,,,,,}
,,,,)}}
,,在
,,,& lt;形象
,,,,源={要求(. ./img/ic_seat_focus.png& & # 39; # 39;)}
,,,,风格={(
,,,,,{
,,,,,,宽度:,36岁,
,,,,,,身高:,32岁
,,,,,,zIndex: 9
,,,,,}
null
null
null
null
null
null
小编给大家分享一下如何使用RN动画做一个“添加购物车”动画,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
最近在选座的新项目中试用了一下本地反应,熟悉新框架的同时,可以略微将交互效果和本地看齐了。
分享一下项目本身比较重要的一个交互动画的做法,沿
这次我们就不装大象了,因为我真的买了冰箱=?
本着言简意赅,不故弄玄虚的原则,依然是三步:
第1步:通过<代码> 动画创建合成动画的观点。仔细观察,“选择座位“动画和“添加购物车”动画类似,都可以分解为透明度变化不透明度(<代码> 变换> 变换> translateX> translateY> rotateZ> 规模)四个分动画(<强>代码见<代码>渲染() );
第2步:响应点击事件,准备好动画的相关参数。目标位置被点击时,在动画的父级组件中通过onPress <代码> 事件的<代码> 事件对象获取点击的位置坐标(<代码> event.nativeEvent.changedTouches [0]。pageX | Y>
第3步:获取参数,<代码> start() 播放动画(<强>代码见<代码> componentDidMount() )。从父级组件中获取位置参数并通过<代码>道具> 不透明性,<代码> rotateZ ,<代码> 规模属性值都是静态变化,分别为<代码> 1→0 <代码> 0度→360度 <代码> 1→> 0 插入方法做各个属性不同类型值的映射,更加方便统一控制),
注意:类似的全局动画要展示在最高层级,防止被后渲染的组件遮挡,最好单独封装组建提升其在UI中的渲染层级。
