react-native-Art动画基础

最新推荐文章于 2024-05-10 09:51:10 发布
最新推荐文章于 2024-05-10 09:51:10 发布
阅读量5.2k 收藏 1
点赞数
分类专栏： android提升 React-Native React-Native--ES6 文章标签： 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiem_erhu/article/details/53333670
版权

一：基础：
ART：暴露了七个组件：
● Surface - 一个矩形可渲染的区域，是其他元素的容器！
● Group - 可容纳多个形状、文本和其他的分组
● Shape - 形状定义，可填充
● Text - 文本形状定义
props
● Surface
○ width : 渲染区域的宽
○ height : 定义渲染区域的高
● Shape
○ d : 定义绘制路径
○ stroke : 描边颜色
○ strokeWidth : 描边宽度
○ strokeDash : 定义虚线
○ fill : 填充颜色
● Text
○ funt : 字体样式，定义字体、大小、是否加粗 如: bold 35px Heiti SC
● Path
○ moveTo(x,y) : 移动到坐标（x,y）
○ lineTo(x,y) : 连线到（x,y）
○ arc() : 绘制弧线
○ close() : 封闭空间

二：实例
● 绘制直线：

import  React,{Component} from 'react';
import  {
 ART,
 View,
 StyleSheet,
} from 'react-native';

var {
  Surface,
  Group,
  Shape,
  Path
} = ART;

export default class  Note extends Component{
    render(){
         const path = Path()
            .moveTo(1,1)//移动起始点
            .lineTo(300,1);//绘制结束后的坐标点
        return(
            <View style={styles.container}>
                <Surface width={300} height={2}>
                    <Shape d={path} stroke="#000000" strokeWidth={1} />
                </Surface>
            </View>
        )
    }

}

var styles = StyleSheet.create({
  container: {
    paddingTop: 20,
  }
});
  注意Surface的宽高，就是视图能绘制的宽高

● 绘制虚线：

export default class  Note extends Component{
    render(){
         const path = Path()
            .moveTo(1,1)//移动起始点
            .lineTo(300,1);//绘制结束后的坐标点
        return(
           <View style={styles.container}>
                <Surface width={300} height={2}>
                    <Shape d={path} stroke="#000000" strokeWidth={2} strokeDash={[10,50]}/>
                </Surface>
            </View>
        )
    }

}

注意：strokeDash={[10,50]}表示：先绘制10像素的实线然后绘制50像素的虚线！

● 绘制矩形：

export default class  Note extends Component{
    render(){
         const path = new Path()
            .moveTo(1,1)
            .lineTo(1,99)
            .lineTo(99,99)
            .lineTo(99,1)
            .close();
        return(
           <View style={styles.container}>
                <Surface width={100} height={100}>
                  <Shape d={path} stroke="#000000" fill="#892265" strokeWidth={1} />
                </Surface>
            </View>
        )
    }

}

注意：close的意思是创建一个密闭的路径，首先通过linrTo绘制三条边，然后使用close链接第四条边。使用fill设置里面的填充色。

● 绘制圆形：

export default class  Note extends Component{
    render(){
         const path = new Path()
            .moveTo(50,1)
            .arc(0,99,25)
            .arc(0,-99,25)
            .close();

        return(
           <View style={styles.container}>
                <Surface width={100} height={100}>
                 <Shape d={path} stroke="#000000" strokeWidth={1}/>
                </Surface>
            </View>
        )
    }

}
  注意：acr(x,y,radius)终点坐标距离起始点的相对距离

● 绘制字体：

export default class  Note extends Component{
    render(){
        const   path=new Path()
        .moveTo(40,40)
        .lineTo(99,10);

        return(
           <View style={styles.container}>
                <Surface width={100} height={100}>
                   <Text strokeWidth={1} stroke="#000" font="bold 35px Heiti SC" path={path} >Swipe</Text>
                </Surface>
            </View>
        )
    }

}

注意：font的使用

● 绘制扇形：

const {Surface} = ART;
import Wedge from './Wedge'

export default class  Note extends Component{
    render(){
        const  path=new Path()
        .moveTo(40,40)
        .lineTo(99,10);

        return(
           <View style={styles.container}>
                 <Surface width={100} height={100}>
                    <Wedge
                     outerRadius={50}
                     startAngle={0}
                     endAngle={60}
                     originX={50}
                     originY={50}
                     fill="blue"/>

                </Surface>
            </View>
        )
    }

}
   注意：使用了一个React.art封装的一个组件Wedge；

● 图层叠加：

const {Surface, Shape,Text, Path,Group} = ART;
export default class  Note extends Component{
    render(){

        const pathRect = new Path()
            .moveTo(1,1)
            .lineTo(1,99)
            .lineTo(99,99)
            .lineTo(99,1)
            .close();

        const pathCircle = new Path()
            .moveTo(50,1)
            .arc(0,99,25)
            .arc(0,-99,25)
            .close();

        const pathText = new Path()
            .moveTo(40,5)
            .lineTo(40,99);


        return(
            <View style={styles.container}>
                <Surface width={100} height={100}>
                    <Group>
                        <Shape d={pathRect} stroke="#000000" fill="#000000" strokeWidth={1}/>
                        <Shape d={pathCircle} stroke="#FFFFFF" fill="#FFFFFF" strokeWidth={1}/>
                        <Text strokeWidth={1} strokeDash={[2,1,2,1]} stroke="#000" font="bold 30px Heiti SC" path={pathText} >Swipe</Text>
                    </Group>
                </Surface>
            </View>
        )
    }

}

注意：图层叠加，上一层的会覆盖下一层的，类似于安卓的帧布局！

三：高级例子：
效果图：

这里写图片描述

import React ,{
    Component
}from 'react';
import {
  ART as Art,
  StyleSheet,
  View,
  Dimensions,
  TouchableWithoutFeedback,
  Animated
} from 'react-native';

var HEART_SVG = "M130.4-0.8c25.4 0 46 20.6 46 46.1 0 13.1-5.5 24.9-14.2 33.3L88 153.6 12.5 77.3c-7.9-8.3-12.8-19.6-12.8-31.9 0-25.5 20.6-46.1 46-46.2 19.1 0 35.5 11.7 42.4 28.4C94.9 11 111.3-0.8 130.4-0.8"
var HEART_COLOR = 'rgb(226,38,77,1)';
var GRAY_HEART_COLOR = "rgb(204,204,204,1)";

var FILL_COLORS = [ 
  'rgba(221,70,136,1)',
  'rgba(212,106,191,1)',
  'rgba(204,142,245,1)',
  'rgba(204,142,245,1)',
  'rgba(204,142,245,1)',
  'rgba(0,0,0,0)'
];

var PARTICLE_COLORS = [
  'rgb(158, 202, 250)',
  'rgb(161, 235, 206)',
  'rgb(208, 148, 246)',
  'rgb(244, 141, 166)',
  'rgb(234, 171, 104)',
  'rgb(170, 163, 186)'
]

 getXYParticle=(total, i, radius)=> {
  var angle = ( (2*Math.PI) / total ) * i;

  var x = Math.round((radius*2) * Math.cos(angle - (Math.PI/2)));
  var y = Math.round((radius*2) * Math.sin(angle - (Math.PI/2)));
  return {
    x: x,
    y: y,
  }
}

 getRandomInt=(min, max)=> {
  return Math.floor(Math.random() * (max - min)) + min;
}

 shuffleArray=(array)=> {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}


var {
  Surface,
  Group,
  Shape,
  Path
} = Art;

//使用Animated.createAnimatedComponent对其他组件创建对话
//创建一个灰色的新型图片
var AnimatedShape = Animated.createAnimatedComponent(Shape);

var {
  width: deviceWidth,
  height: deviceHeight
} = Dimensions.get('window');

export default  class Key extends  Component{
  constructor(props) {
    super(props);

    this.state = {
       animation: new Animated.Value(0) 
    };
  }

  explode=()=> {
    Animated.timing(this.state.animation, {
      duration: 1500,
      toValue: 28
    }).start(() => {
      this.state.animation.setValue(0);
      this.forceUpdate();
    });
  }

  getSmallExplosions=(radius, offset)=> {
    return [0,1,2,3,4,5,6].map((v, i, t) => {

      var scaleOut = this.state.animation.interpolate({
        inputRange: [0, 5.99, 6, 13.99, 14, 21],
        outputRange: [0, 0, 1, 1, 1, 0],
        extrapolate: 'clamp'
      });

      var moveUp = this.state.animation.interpolate({
        inputRange: [0, 5.99, 14],
        outputRange: [0, 0, -15],
        extrapolate: 'clamp'
      });

      var moveDown = this.state.animation.interpolate({
        inputRange: [0, 5.99, 14],
        outputRange: [0, 0, 15],
        extrapolate: 'clamp'
      });

      var color_top_particle = this.state.animation.interpolate({
        inputRange: [6, 8, 10, 12, 17, 21],
        outputRange: shuffleArray(PARTICLE_COLORS)
      })

      var color_bottom_particle = this.state.animation.interpolate({
        inputRange: [6, 8, 10, 12, 17, 21],
        outputRange: shuffleArray(PARTICLE_COLORS)
      })

      var position = getXYParticle(7, i, radius)

      return (
        <Group 
          x={position.x + offset.x } 
          y={position.y + offset.y} 
          rotation={getRandomInt(0, 40) * i}
        >
          <AnimatedCircle 
            x={moveUp}
            y={moveUp}
            radius={15} 
            scale={scaleOut} 
            fill={color_top_particle} 
          />
          <AnimatedCircle 
            x={moveDown}
            y={moveDown}
            radius={8} 
            scale={scaleOut} 
            fill={color_bottom_particle} 
          />
        </Group>
      )
    }, this)
  }
  render() {
    var heart_scale = this.state.animation.interpolate({
      inputRange: [0, .01, 6, 10, 12, 18, 28],
      outputRange: [1, 0, .1, 1, 1.2, 1, 1],
      extrapolate: 'clamp'
    });

    var heart_fill = this.state.animation.interpolate({
      inputRange: [0, 2],
      outputRange: [GRAY_HEART_COLOR, HEART_COLOR],
      extrapolate: 'clamp'
    })

    var heart_x = heart_scale.interpolate({
      inputRange: [0, 1],
      outputRange: [90, 0],
    })

    var heart_y = heart_scale.interpolate({
      inputRange: [0, 1],
      outputRange: [75, 0],
    })

    var circle_scale = this.state.animation.interpolate({
      inputRange: [0, 1, 4],
      outputRange: [0, .3, 1],
      extrapolate: 'clamp'
    });

    var circle_stroke_width = this.state.animation.interpolate({
      inputRange: [0, 5.99, 6, 7, 10],
      outputRange: [0, 0, 15, 8, 0],
      extrapolate: 'clamp'
    });

    var circle_fill_colors = this.state.animation.interpolate({
      inputRange: [1, 2, 3, 4, 4.99, 5],
      outputRange: FILL_COLORS,
      extrapolate: 'clamp'
    })

    var circle_opacity = this.state.animation.interpolate({
      inputRange: [1,9.99, 10],
      outputRange: [1, 1, 0],
      extrapolate: 'clamp'
    })


    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={this.explode} style={styles.container}> 
          <View style={{transform: [{scale: .8}]}}>
            <Surface width={deviceWidth} height={deviceHeight}>
              <Group x={75} y={200}>
             //是一个心形的图像
                <AnimatedShape
                  d={HEART_SVG}
                  x={heart_x}
                  y={heart_y}
                  scale={heart_scale}
                  fill={heart_fill}
                />
                <AnimatedCircle
                  x={89}
                  y={75}
                  radius={150}
                  scale={circle_scale}
                  strokeWidth={circle_stroke_width}
                  stroke={FILL_COLORS[2]}
                  fill={circle_fill_colors}
                  opacity={circle_opacity}
                />

                {this.getSmallExplosions(75, {x:89, y:75})}
              </Group>
            </Surface>
          </View>
        </TouchableWithoutFeedback>
      </View>
    );
  }
};

class  AnimatedCircle  extends  Component{
  render(){
     var radius = this.props.radius;
    var path = Path().moveTo(0, -radius)
        .arc(0, radius * 2, radius)
        .arc(0, radius * -2, radius)
        .close();
    return  React.createElement(AnimatedShape, React.__spread({},  this.props, {d: path}));
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});
time_iter
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
react-native之ART绘图详解
xiangzhihong8的专栏
08-02 1万+
背景在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。art是一个旨在多浏览器兼容的Node style CommonJS模块。在它的基础上，Facebook又开发了react-art ，封装art，使之可以被react.js所使用，即实现了前端的svg库。然而，考虑到
art:React Native模块，允许您绘制矢量图形
05-17
@react-native-community/art 注意：ART是从核心react-native提取的，是“”工作的一部分。 React Native模块，允许您绘制矢量图形 入门 安装模块 yarn add @react-native-community/art 或者 npm install @react-native-community/art --save 链接模块 大多是自动链接 对于react-native >= 0.60应自动链接ReactNativeART，并且不需要其他操作。 对于react-native < 0.60您需要链接ReactNative ART： react - native link @ react - native - community / art 手动链接 手动链接iOS的库 Open project.xcodeproj in Xcod
推荐开源项目：React ART - 跨平台的矢量图形库
最新发布
gitblog_00068的博客
05-10 266
推荐开源项目：React ART - 跨平台的矢量图形库 项目地址:https://gitcode.com/reactjs/react-art 在当前的前端开发领域，React 已经成为构建复杂用户界面的重要工具。而当React遇见ART（一个强大的矢量图形库），就诞生了React ART，一个用于JavaScript绘制矢量图形的杰出库。 1. 项目介绍 React ART 是React的一个扩...
react-native-svg-animations:用于本机的SVG动画包装器
05-01
React原生svg动画 SVG动画包装，用于本机React。 基于该项目的示例： : 依存关系 svg-path-properties react-native-svg 安装 $ npm i react-native-svg-animations --save 演示版 动画SVGPath 动画SVG路径 用法 该软件包包含用于在本机显示SVG动画的包装器组件，当前包含以下组件： 动画SVGPath 动画SVG路径 动画SVGPath 显示单个动画SVG路径的组件。 有关完整的实现，请参见。 import { AnimatedSVGPath } from "react-native-svg-animations" ; ... < View> < AnimatedSVGPath strokeColor = { "green" } duration
ReactNative 引入SVG图片
夏目三三
07-04 5623
一、将所有的SVG内容，打包到js文件中，以key-value的形式存储。1.使用脚本将所有SVG资源打包，脚本来源：react-native icon解决方案（svg）生成getSvg.js文件（脚本代码如下），与SVG文件夹放在同一级，并根据需要修改其中参数。如SVG路径：./svgs ，修改成自己的文件夹路径及名称；导出的目标文件：./Svgs.js 可以修改名称。// getSvg.js...
React-Native使用ART实现水波纹动画、波浪线、声波音频波动效果(附源码)
05-02
在React Native中有个ART库，它可以绘制各种线(实线、虚线、曲线)、图形(矩形、圆、扇形)组合，让非常酷炫的绘图及动画变成了可能。 至于水波纹、波浪动画、声波音频这些常用的效果，一般都是贝塞尔曲线加持画出来...
react-native-ART-doc：react react-native ART模块的非官方文档
02-05
React Native ART（Android Renderable Tree）是React Native框架中的一个模块，它为开发者提供了一套高级图形绘制工具，用于创建复杂的2D矢量图形和动画。这个非官方文档“react-native-ART-doc”旨在补充官方文档...
react-native之ART绘图方法详解
08-29
在React Native开发中，ART（Accelerated Rendering Toolkit）是一个强大的绘图库，它允许开发者创建复杂的二维图形和动画，同时保持跨平台兼容性。ART基于CommonJS模块，并且由Facebook开发，专门为了适应React.js...
react-native-loader：React Native的动画微调器集合
02-05
对于iOS，将ART.xcodeproj node_modules/react-native/Libraries/ART添加到您的库中，然后链接libART.a 。 如何使用 import { Bubbles , DoubleBounce , Bars , Pulse } from ' react-native-loader ' ; // ... &...
React Native 动画（Animated）
殇神马的博客
10-23 7383
一、前言 对于一个移动应用APP，其中的动画交互能够给用户带来很好的体验，所以动画在移动应用开发过程中是非常重要的; 二、React Native中实现动画的方式 -不断修改state -Animated API 首先如果不使用任何动画API，那想到的实现动画效果的方式，应该就是通过不断修改state中的组件相关的属性值来实现动画效果,但是这个就是不断的重新渲染整个页面，所以可能会非常影响性能; React Native中提供了Animated API来实现动画,Animated API可以简洁的实现各种动
react-native-pure-chart：react-native图表库，不使用svg或ART，而仅使用react本地纯组件
02-05
React本机纯图表 不使用svg或ART而是仅使用react-native组件的纯React本机图表库。 （您不必导入带有react-native link图形库或将ART添加到您的项目中！） 演示版 线图 LineChart（多系列） 条形图 条形图（多系列） 饼图（测试版） 安装 yarn add react-native-pure-chart 或者使用npm： npm install react-native-pure-chart --save 需要 import PureChart from 'react-native-pure-chart' ; 用法 单一系列：简
React native动画
05-27
React native动画，主要实现了渐变动画，旋转动画，帧动画，复杂动画等
react-native-art-绘图入门
滴水可以穿石 百炼才能成钢，谋全局而通一域 致广大而尽精微
10-31 2527
本文的示例工程https://github.com/xu-duqing/React-Native-ART-Sample .a文件 定义 所谓静态链接是指把要调用的函数或者过程链接到可执行文件中，成为可执行文件的一部分。当多个程序都调用相同函数时，内存中就会存在这个函数的多个拷贝，这样就浪费了宝贵的内存资源。.so文件是共享库文件（动态链接）。动态链接所调用的函数代码并没有被
react-native使用react-art制作SVG动画
weixin_33973600的博客
02-18 435
想要使用SVG做一个动画，郁闷了一上午终于有了一点思路。。 其实我是看了一篇国外的文章。网址：http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/ 介绍：http://browniefed.com/blog/2015/10/14/react-native-morphing-svg-p...
React Native SVG Animated 绘制动画
s349856186的专栏
01-09 4028
转自：React Native SVG描边动画stroke属性 stroke 定义描边颜色 stroke="#0078ff" strokeWidth 定义描边的宽度strokeWidth="3" 创建虚线时候用到的属性：strokeDasharray 创建虚线// 假设一个‘空格’5像素，一个‘_’5像素 strokeDasharray="5" // 看到的是 _ _ _ _ 即5像素实线，
React-Native画线平滑处理
苏小败在路上
10-12 6602
这次开发要手写画线，我们一般画线的时候是直接获取屏幕上的点，然后利用ART绘制出一天路径线： /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, { Component } from 'react'; import { StyleSheet
React-Native ART绘图
supming1的专栏
10-20 2145
最近项目中需要实现类似进度条的仪表盘效果，考虑可能可以通过绘图实现，网上查了不少资料，都是说采用React-Native 自带的ART模块进行绘图，但按照参照网上的方法，各种报错，后在github 的react-native项目issue中，发现ART模块已经独立出来了，官方推荐采用https://github.com/react-native-community/art进行代替，经尝试，按官网...
技术文章｜react-native之ART绘图详解
CS13522431352的博客
08-03 518
背景 在移动应用的开发过程中，绘制基本的二维图形或动画是必不可少的。然而，考虑到Android和iOS均有一套各自的API方案，因此采用一种更普遍接受的技术方案，更有利于代码的双平台兼容。 art是一个旨在多浏览器兼容的Node style CommonJS模块。
react-native link react-native-pdf zsh: command not found: react-native
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值