当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用RN Animated做一个“添加购物车”动画的方法

使用RN Animated做一个“添加购物车”动画的方法

2019年06月03日  | 移动技术网IT编程  | 我要评论

最近在选座的新项目中试用了一下 react native，熟悉新框架的同时，可以略微将交互效果和 native 看齐了。

分享一下项目本身比较重要的一个交互动画的做法, rt。

这次我们就不装大象了，因为我真的买了冰箱 =,=

本着言简意赅，不故弄玄虚的原则，依然是三步：

第 1 步：通过 animated 创建合成动画的 view。仔细观察，“选择座位” 动画和 “添加购物车” 动画类似，都可以分解为透明度变化（ opacity ）和 3d 变化（ transform ）两部分。而 transform 又能进一步分解为水平位移（ translatex ）、垂直位移（ translatey ）、旋转（ rotatez ）、缩放（ scale ）四个分动画（ 代码见 render() ）；

第 2 步：响应点击事件，准备好动画的相关参数。目标位置被点击时，在动画的父级组件中通过 onpress 事件的 event 对象获取点击的位置坐标（ event.nativeevent.changedtouches[0].pagex|y ）作为动画起始位置。终点位置一般为固定位置，当然你也可以指定动态值；

第 3 步：获取参数， start() 播放动画（ 代码见 componentdidmount() ）。从父级组件中获取位置参数并通过 props 传入子动画组件。其中 opacity 、 rotatez 、 scale 属性值都是静态变化，分别为 1 -> 0 0deg -> 360deg 1 -> 0 （可以利用 interpolate 方法做各个属性不同类型值的 mapping，更加方便统一控制）；

注意：类似的全局动画要展示在最高层级，防止被后渲染的组件遮挡，最好单独封装组建提升其在 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 (
   <animated.view
    style={{
     zindex: 9,
     position: 'absolute',
     opacity: animvalue.interpolate({
      inputrange: [0, 1],
      outputrange: [1, 0]
     }),
     transform: [
      {
       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: ['0deg', '180deg']
       })
      },
      {
       scale: animvalue.interpolate({
        inputrange: [0, 1],
        outputrange: [1, 0]
       })
      }
     ]}}
   >
    <image
     source={require('../img/ic_seat_focus.png')}
     style={[
      {
       width: 36,
       height: 32,
       zindex: 9
      }
     ]}
    />
   </animated.view>
  );
 }
}

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网