欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-10 20:09:32
最近在选座的新项目中试用了一下 react native,熟悉新框架的同时,可以略微将交互效果和 native 看齐了。 分享一下项目本身比较重要的一个交互动画的做法,...

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

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

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

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

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

第 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 传入子动画组件。其中 opacityrotatezscale 属性值都是静态变化,分别为 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>
  );
 }
}

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。