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


Posted in Javascript onSeptember 12, 2018

最近在选座的新项目中试用了一下 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>
  );
 }
}

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

Javascript 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
js 弹出框只弹一次(二次修改之后的)
Nov 26 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
jQuery实现的倒计时效果实例小结
Apr 16 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
Jun 20 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 #Javascript
Vue弹出菜单功能的实现代码
Sep 12 #Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 #Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 #Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 #Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 #Javascript
Vue $emit $refs子父组件间方法的调用实例
Sep 12 #Javascript
You might like
php字符串截取中文截取2,单字节截取模式
2007/12/10 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
基于PHP生成简单的验证码
2016/06/01 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
JqGrid web打印实现代码
2011/05/31 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JS的replace方法介绍
2012/10/20 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
vue-lazyload使用总结(推荐)
2018/11/01 Javascript
vue 详情跳转至列表页实现列表页缓存
2019/03/27 Javascript
微信小程序 搜索框组件代码实例
2019/09/06 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
Windows下安装Scrapy
2018/10/17 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
婚宴父母致辞
2015/07/27 职场文书
Python中的协程(Coroutine)操作模块(greenlet、gevent)
2022/05/30 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL