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的简单用法)的更多相关文章

  1. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  2. [RN] React Native 下拉放大动画

    React Native 下拉放大动画 经测试,无法运行 https://www.jianshu.com/p/1c960ad75020

  3. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  4. iOS开发UI篇—iOS开发中三种简单的动画设置

    iOS开发UI篇—iOS开发中三种简单的动画设置 [在ios开发中,动画是廉价的] 一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView b ...

  5. pyqt一个简单的动画

    import sys from PyQt4.QtGui import QApplication , QGraphicsEllipseItem , QGraphicsItemAnimationfrom ...

  6. [置顶] 使用红孩儿工具箱完成基于Cocos2d-x的简单游戏动画界面

    [Cocos2d-x相关教程来源于红孩儿的游戏编程之路CSDN博客地址:http://blog.csdn.net/honghaier 红孩儿Cocos2d-X学习园地QQ3群:205100149,47 ...

  7. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

  8. iOS UI-三种简单的动画设置

    一.首尾式动画 代码示例: // beginAnimations表示此后的代码要“参与到”动画中 [UIView beginAnimations:nil context:nil]; //设置动画时长 ...

  9. 用Direct2D和DWM来做简单的动画效果2

    原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...

  10. 用Direct2D和DWM来做简单的动画效果

    原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...

随机推荐

  1. 轮播图--使用原生js的轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. SSISDB7:当前正在运行的Package及其Executable

    PM问:“Vic,现在ETL Job跑到哪一个Package了,正在执行哪个Task?”,第一次遇到这个问题时,一下就懵逼了,只能硬着头皮说:“我看看”. 在做项目开发时,这个问题很常见,但是,被很多 ...

  3. 【python+selenium】截取某个元素

    一. selenium截图1.selenium提供了几个截取全屏的方法- get_screenshot_as_file(self, filename) --这个方法是获取当前window的截图,出现I ...

  4. 【github】github的使用

    一.上传本地代码 1.在github上新建一个repository(命名为英文) 2.打开cmd,进入上传代码所在目录 3.输入如下命令 第一步:git init --建仓第二步:git add  * ...

  5. 第五章、Django之模型层---单表操作

    目录 第五章.Django之模型层---单表操作 一.ORM查询 二.Django测试环境搭建 三.单表查询 1. 增 2. 改 3. 删 4. 查 第五章.Django之模型层---单表操作 一.O ...

  6. 《设计模式之美》 <02>评判代码质量好坏的维度

    如何评价代码质量的高低? 实际上,咱们平时嘴中常说的“好”和“烂”,是对代码质量的一种描述.“好”笼统地表示代码质量高,“烂”笼统地表示代码质量低.对于代码质量的描述,除了“好”“烂”这样比较简单粗暴 ...

  7. ListSetAndMap

    package com.collection.test; import java.util.ArrayList; import java.util.HashMap; import java.util. ...

  8. web开发:Bootstrap应用及内存管理

    一.栅格系统 二.移动端适配 三.栅格系统案例 四.表格 五.表单 六.循环应用 一.栅格系统 <!DOCTYPE html> <html> <head> < ...

  9. 修改文件属性与权限(鸟哥linux私房菜)

    chgrp:改变文件所属用户组 chown:改变文件所有者 chmod:改变文件的权限 chgrp [-R] dirname/filename ... chgrp users install.log( ...

  10. 通过自动回复机器人学Mybatis---加强版

    第2章 接口式编程 介绍 Mybatis 的接口式编程,并说明为什么要采用这种形式,以及 Mybatis 是如何实现的