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 ...
随机推荐
- 轮播图--使用原生js的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- SSISDB7:当前正在运行的Package及其Executable
PM问:“Vic,现在ETL Job跑到哪一个Package了,正在执行哪个Task?”,第一次遇到这个问题时,一下就懵逼了,只能硬着头皮说:“我看看”. 在做项目开发时,这个问题很常见,但是,被很多 ...
- 【python+selenium】截取某个元素
一. selenium截图1.selenium提供了几个截取全屏的方法- get_screenshot_as_file(self, filename) --这个方法是获取当前window的截图,出现I ...
- 【github】github的使用
一.上传本地代码 1.在github上新建一个repository(命名为英文) 2.打开cmd,进入上传代码所在目录 3.输入如下命令 第一步:git init --建仓第二步:git add * ...
- 第五章、Django之模型层---单表操作
目录 第五章.Django之模型层---单表操作 一.ORM查询 二.Django测试环境搭建 三.单表查询 1. 增 2. 改 3. 删 4. 查 第五章.Django之模型层---单表操作 一.O ...
- 《设计模式之美》 <02>评判代码质量好坏的维度
如何评价代码质量的高低? 实际上,咱们平时嘴中常说的“好”和“烂”,是对代码质量的一种描述.“好”笼统地表示代码质量高,“烂”笼统地表示代码质量低.对于代码质量的描述,除了“好”“烂”这样比较简单粗暴 ...
- ListSetAndMap
package com.collection.test; import java.util.ArrayList; import java.util.HashMap; import java.util. ...
- web开发:Bootstrap应用及内存管理
一.栅格系统 二.移动端适配 三.栅格系统案例 四.表格 五.表单 六.循环应用 一.栅格系统 <!DOCTYPE html> <html> <head> < ...
- 修改文件属性与权限(鸟哥linux私房菜)
chgrp:改变文件所属用户组 chown:改变文件所有者 chmod:改变文件的权限 chgrp [-R] dirname/filename ... chgrp users install.log( ...
- 通过自动回复机器人学Mybatis---加强版
第2章 接口式编程 介绍 Mybatis 的接口式编程,并说明为什么要采用这种形式,以及 Mybatis 是如何实现的