react native实现水波浪动画效果

最新推荐文章于 2024-05-16 09:33:32 发布
最新推荐文章于 2024-05-16 09:33:32 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： react native 文章标签： art  react native 波浪动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luyu13141314/article/details/92782657
版权
web端可以用canvas来绘制波浪效果react native 中可以用ART来绘制，ART可以绘制直线、虚线、矩形、圆等等…Android默认就包含ART库，IOS需要单独添加依赖库。ART暴露的组件有7个，在这里就不多介绍了，推荐2篇文章：react-native-art-绘图入门react-native之ART绘图详解废话不多说了1、添加依赖Android默认就包含A...
摘要由CSDN通过智能技术生成

web端可以用canvas来绘制波浪效果
react native 中可以用ART来绘制，ART可以绘制直线、虚线、矩形、圆等等…

Android默认就包含ART库，IOS需要单独添加依赖库。

ART暴露的组件有7个，在这里就不多介绍了，推荐2篇文章：

react-native-art-绘图入门
react-native之ART绘图详解

废话不多说了，直接说怎么做

1、添加依赖

Android默认就包含ART库，IOS需要单独添加依赖库。

IOS添加依赖库 :
右键点击项目 -> ‘Add Files to ProjectName -> 选择 node_modules/react-native/React/Libraries/ART/ART.xcodeproj’

在这里插入图片描述

将 libART.a 添加到 Linked Frameworks and

最低0.47元/天 解锁文章
喝着绿茶的猫
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
如何在React Native中制作实时SoundCloud波形
07-30 718
by Pritish Vaidya 通过Pritish Vaidya 如何在React Native中制作实时SoundCloud波形 (How to make realtime SoundCloud Waveforms in React Native) 介绍 (Introduction) SoundCloud is a music and podcast streaming platfor...
React-Native使用ART实现水波纹、波浪线动画、声波音频波动效果(附源码)
Crazy程序猿
05-02 1258
笔者最近有个RN项目，需要在与设备通话的时候，App侧展示声波纹UI效果，以笔者的尿性又去折腾整理了一番，效果还是不错的，已在项目使用。 在React Native中有个ART库，它可以绘制各种线(实线、虚线、曲线)、图形(矩形、圆、扇形)组合，让非常酷炫的绘图及动画变成了可能。 至于水波纹、波浪动画、声波音频这些常用的效果，一般都是贝塞尔曲线加持画出来的。 希望能帮助到有需要的同学，加油共勉！
【教程】React 实现 Material Design 中涟漪（Ripple）效果
weixin_34250434的博客
05-12 487
前言 Material Design 推出已有接近4年，大家对“触摸涟漪”（Ripple）应该不陌生,简单来说就是一个水波纹效果（见下图）。前段时间接触了 material-ui 这个库，看了下 Ripple 的源码，觉得并不是一个非常好的实现，所以决定自己写一个 React 组件—— React Touch Ripple。现已开源到 G...
探索创新：react-native-canvas - 带着你的React Native应用飞入图形绘制的新世界！
最新发布
gitblog_00068的博客
05-16 465
探索创新：react-native-canvas - 带着你的React Native应用飞入图形绘制的新世界！ 项目地址:https://gitcode.com/iddan/react-native-canvas 在如今的移动应用开发中，React Native以其强大的跨平台性能和丰富的组件库，已经成为开发者们的首选框架之一。然而，当涉及到动态图形渲染和交互式设计时，原生的React Nati...
react+less中使用动态路径（波浪线~的使用）
幻日のヨハネ
09-03 2013
准备 webpack 一般我们都会先配置好 webpack ，以可以使用 @ 来代替 src 目录： addWebpackAlias({ '@': resolve('src'), }) 如果不会配置可以看这里： 《react不使用eject的配置方法（config-overrides复现vue项目全部配置）》 less 动态路径 在 less 中，使用 ~ 为前缀就会变成动态的，他默认会去寻找 node_modules 下的模块，也就是以 node_modules 为原点，所以你可以这
react 组件连动效果_记一个缓动水柱React动画组件的初次尝试
weixin_29890207的博客
01-17 191
写完意识到这是第一篇，算是前言吧。。。以后在zhihu写点东西...就当是博客好了，个人观点和体会而已，不求高大上，但求回头看的时候能够让以后的自己瞧不起。背景：写React也一年多了,从一开始的单React到React+redux也累计写过几十上百号的基础组件和业务基础组件了...然后很不幸的是作为一个数据产品开发，不可能天天跟最繁琐的用户管理相关页面(我主要负责这部分...)打交道，产品表示以...
react native 实现水波纹效果
05-29
react native 实现水波纹效果，效果非常棒哦
reactnative的一个添加购物车动画效果控件
08-11
在React Native中，创建动态、引人入胜的用户体验是至关重要的，这通常涉及到各种动画效果的实现。本文将深入探讨如何使用JavaScript开发一个在React Native应用中添加购物车的动画效果控件，以增强用户界面的交互性...
基于React Native 0.52实现轮播图效果
12-11
轮播图几乎是必备的效果，这里选择 react-native-swiper 来实现，效果如下图： 二、实现轮播图效果 1、通过npm安装react-native-swiper npm install react-native-swiper --save 2、在recommend.js引入react-...
react native 文字轮播的实现示例
10-18
主要介绍了react native 文字轮播的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
微信小程序仿抖音短视频切换效果的实例代码
10-15
主要介绍了微信小程序仿抖音短视频切换效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
react-native滑动吸顶效果的实现过程
12-10
于是就被调去做RN（react-native），体验还不错，当前有个需求是首页中间吸顶的效果，虽然已经很久没写样式了，不过这种常见样式应该是so-easy，没成想翻车了，网上搜索换了几个方案都不行，最后去github上复制封装...
分别使用React和Vue实现的水波纹组件
weixin_34187862的博客
03-25 543
vue版本: vueripple.bengbuzhangyue.xyz/ react版本: ripple.bengbuzhangyue.xyz/ 源码地址：github.com/BengBu-YueZ… 转载于:https://juejin.im/post/5c983a996fb9a070e344bafd
React-Native使用react-native-community/art实现水波纹、音频波动效果
我可能是个Siri
11-25 1120
效果如下，可以通过改变volume值实现动态效果 贴组件代码，复制就能用： 【依赖package.json】 "@react-native-community/art": "^1.1.2", "react-native": "0.61.4", 【组件代码DancingLine.tsx】 import React, { PureComponent, } from 'react'; import { StyleSheet, View, Dimensions, } fr...
React Native-贝塞尔曲线实现波浪效果
Jeffrey的博客
05-30 1466
一、背景 项目需要开发一个自定义组件，需要有波浪流动的效果，准备使用贝塞尔曲线作为模型来实现，发现ART这个库可以用来绘制各种曲线，于是就打算使用它了。 二、设计思路 2.1 曲线模型 利用二阶贝塞尔模型来模拟：不熟悉贝塞尔曲线的可以先了解一下这个模型，先看下图： bezier.png 图中用了两端二阶贝塞尔曲线的组合（P1、P3分别是控制点），把它当做构成波浪组件的...
react-native 中使用echarts 水波图
mmorss的专栏
01-29 1080
echarts-liquidfill.min.js加放到库中，并在tpl.html中引用便可
水纹波浪效果动画
番薯大佬的专栏
02-08 3293
github：https://github.com/potato512/SYAnimation 效果图： 示例代码见"github：https://github.com/potato512/SYAnimation"中的"SYWaterAnimationView"类。 使用： // 使用方法1 SYWaterAnimationView *waterView = [
React Native Animated 动画详解 - 实例篇 (这篇就够了)
热门推荐
大灰狼的小绵羊哥哥的博客
03-09 1万+
之前已经更新过Animated动画基础篇相关知识点,今天讲解Animated.Value,Animated.ValueXY以及相关动画库使用实例。学习完 本篇相信大家对于动画库的基本使用应该是没有问题了。   http://mp.weixin.qq.com/s?__biz=MzA4OTc4MTM0OA==&mid=2650358193&idx=1&sn=2f8bd640476df0659d99
react-native 实现声波纹效果
05-18
要在 React Native 中实现声波纹效果，你可以使用第三方组件 react-native-audio-record-view，该组件提供了一个可自定义的声音波形视图，可以用来显示音频波形。 以下是实现步骤： 1. 在你的 React Native 项目中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值