react-hook的简单的动画插件react-simple-animate(其实是react插件,但是这里只介绍react-hook的简单用法)
1、useAnimate(普通anima动画的形式)
(1)js
const animate = useAnimate({
complete: { display: 'none' }, //动画完成的css
easeType: "linear", //动画的表现
duration: 5, //动画时长
start: { opacity: 0 }, //动画开始
end: { opacity: 1 }, //动画结束
onComplete: () => { //动画结束的方法
console.log('complete')
}
})
(2)dom
<div style={animate.style}>123</div>
(3)动画播放方法
animate.play(true)
2、useAnimateKeyframes(关键帧动画的形式)
(1)js
const animateFrames = useAnimateKeyframes({
iterationCount: 'infinite', //动画循环方式
direction: 'alternate', //动画方向
duration: 5, //时长
keyframes: [
'transform: rotateX(0) rotateY(0) rotateZ(0)',
'transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg)',
]
})
(2)其余与上面相同,只是在原来就有play方法的前提下多了一个pause的方法
3、useAnimateGroup(数组的形式)
(1)js
const items = ['R', 'E', 'A', 'C', 'T']
const animateGroup = useAnimateGroup({
sequences: items.map(() => ({
start: { opacity: 1, transform: 'translateY(0)' },
end: { opacity: 0, transform: 'translateY(-10px)' }
}))
})
(2)整体与anima方式相同,就是以数组的形式,就是变为"styles"
注意:在方法中包装了isPlaying和setIsPlaying,所以如果一个方法中包含多个动画,会产生互相影响(关键帧动画同理,isPaused和setIsPaused)
react-hook的简单的动画插件react-simple-animate(其实是react插件,但是这里只介绍react-hook的简单用法)的更多相关文章
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- [RN] React Native 下拉放大动画
React Native 下拉放大动画 经测试,无法运行 https://www.jianshu.com/p/1c960ad75020
- 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...
- iOS开发UI篇—iOS开发中三种简单的动画设置
iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...
- pyqt一个简单的动画
import sys from PyQt4.QtGui import QApplication , QGraphicsEllipseItem , QGraphicsItemAnimationfrom ...
- [置顶] 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面
[Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址:http://blog.csdn.net/honghaier 红孩儿Cocos2d-X学习园地QQ3群:205100149,47 ...
- 【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...
- iOS UI-三种简单的动画设置
一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 ...
- 用Direct2D和DWM来做简单的动画效果2
原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...
- 用Direct2D和DWM来做简单的动画效果
原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...
随机推荐
- K2 BPM_如何将RPA的价值最大化?_全球领先的工作流引擎
自动化技术让企业能够更有效的利用资源,减少由于人为失误而造成的风险损失.随着科技的进步,实现自动化的途径变得更加多样化. 据Forrester预测,自动化技术将在2019年成为引领数字化转型的前沿技 ...
- websocket + TP5.1 + apache 配置步骤
websocket + TP5.1 + apache 配置步骤 1. https ssl配置好 2. 检查php环境是否满足Workerman要求 curl -Ss http://www.worker ...
- Nginx配置客户端SSL双向认证
对于 NGINX 的 HTTPS 配置,通常情况下我们只需要实现服务端认证就行,因为浏览器内置了一些受信任的证书颁发机构(CA),服务器端只需要拿到这些机构颁发的证书并配置好,浏览器会自己校验证书的可 ...
- windows 8/10 彻底删除脱机文件
先关闭脱机文件选项 控制面板 > 同步中心 > 管理脱机文件 > 查看脱机文件 > 点击 计算机 > ... > 脱机同步的文件夹右键,取消同步 可能需要重启 如果 ...
- mysql 忘记密码如何修改
第一步:将服务停掉 /etc/init.d/mysqld stop 第二步:加参数启动服务 cd /application/mysql/bin/ mysqld_safe --skip-grant-ta ...
- 桌面Ubuntu卡死解决方案
通常情况下,我们用桌面Ubuntu会遇到卡住的的情况,我们一般会进行强制关机处理,但其实还有另一种操作,不用强制关机. 切换到tty模式,执行命令pkill X;start X;就能重新进入桌面,不用 ...
- POI读取Excel数据
POI读取Excel表格数据 * {所需相关jar下载: * commons-collections4-4.4.jar * commons-compress-1.19.jar * poi-4.1.1. ...
- Map的使用及遍历方式
Java中Map遍历的四种方式 如果同时需要key和value推荐使用entrySet(第一种): 如果只是获取key,或者value,推荐使用keySet或者values方式(第二种): 如果需要在 ...
- macOS 终端常用命令
macOS 常用命令 基本命令 1.列出文件 ls 参数 目录名 例:看看驱动目录下有什么:ls /System/Library/Extensions 参数 -w 显示中文,-l 详细信息,-a 包括 ...
- 从Excel中读取数据并批量写入MySQL数据库(基于MySQLdb)
一.Excel内容如下,现在需要将Excel中的数据全部写入的MySQL数据库中: 二.连接MySQL的第三方库使用的是“MySQLdb”,代码如下: # -*- coding:utf-8 -*-im ...