-
2021-10-25 16:16:54
```csharp using Sirenix.OdinInspector; using Spine.Unity; using System.Collections; using System.Collections.Generic; using UnityEngine; public class MixTest1 : MonoBehaviour { [SerializeField] [SpineAnimation] private string _beforeAnim; [SerializeField] [SpineAnimation] private string _animationName; //播放通道序号 public int TrackIndex = 1; public float AttachmentThreshold = 1; public float MixDuration = 0; public float mixDuration = 5; public float delay = 0.1f; public SkeletonAnimation skeletonAnimation; [Button("Test0")] public void Play1() { // 默认前面动画在0播放,可自行修改 var track = skeletonAnimation.AnimationState.SetAnimation(0, _beforeAnim, true); } [Button("Test1")] public void PlayShoot() { // 叠加动画 在 通道1播放 var track = skeletonAnimation.AnimationState.SetAnimation(TrackIndex, _animationName, false); track.AttachmentThreshold = AttachmentThreshold; track.MixDuration = MixDuration; var empty = skeletonAnimation.state.AddEmptyAnimation(TrackIndex, mixDuration, delay); empty.AttachmentThreshold = 1f; } }
在做动画叠加的时候,部分融化直接的 骨骼冲突导致 某些时候只能A融合B而不能B融合A,所以在制作动画的时候,需要考虑好动画之间的关系,哪些是基础动画,哪些是叠加动画
更多相关内容 -
Unity 让物体同时播放两种动画
2016-12-06 11:34:31在用Unity开发工程中,会遇到需要让一个物体同时播放两种动画的情况,举个简单的例子: 一只小鸟,这只小鸟会拍翅膀,这只小鸟也会按一定的轨迹飞行。 实现这个需求有几种思路: 1. 用动画控制器控制小鸟拍翅膀的...在用Unity开发工程中,会遇到需要让一个物体同时播放两种动画的情况,举个简单的例子: 一只小鸟,这只小鸟会拍翅膀,这只小鸟也会按一定的轨迹飞行。 实现这个需求有几种思路:
1. 用动画控制器控制小鸟拍翅膀的动画,编写脚本控制小鸟的飞行轨迹;
2. 在一个动画中同时K上 拍翅膀相关的帧 和 运动轨迹相关的帧;
3. 给这只小鸟加一个父节点,小鸟自身的控制器会控制鸟拍翅膀的动画,其父节点上挂一个控制器,用来控制器运动轨迹;
4. 采用动画混合层的方式,由小鸟自身的动画控制器 直接控制 小鸟拍翅膀及其运动轨迹的动画。
本文将会对第 4 种思路进行简要介绍。
1)新建一个Unity工程,导入相关资源,图中的“Bird”已经挂好动画控制器,并且其“BaseLayer” (第0层)中新建一个 拍翅膀动画 => “Fly”动画。此时,小鸟已经具备拍翅膀的表现了。
接着,我们需要新建一个动画层,来实现其飞行轨迹动画的叠加:
2). 点击下图中左上角的 “ + ”号,下方便会出现一个新的层 “New Layer ” 也就是动画层1了(BaseLayer 是动画层0),此时可以对这个层重命名。
3) 在新建的层中点击右上角的设置按钮 ,打开该层的设置面板,在设置面板中把 weight 的值 设置成1 (当weight 为0 时,该层的动画不起作用,随着weight的值增大,动画权重增大(类似于动画速度增加),当weight为1时,表示该层中的动画均为正常速度播放)。
4)在该层中K上控制小鸟移动的动画 => “Move"。
此时,基本功能已经实现,启动Unity 你便会发现,物体已经具备两种动画表现。
在这里可以扩展一些知识, 如何单独停止第一层(即新建层)动画,并在一定时候后继续该层在停止时刻的动画? ----有两种方法可以供大家参考。
第一种方法也是常用的方法是 用代码设置该层的权重 weight =0 。新建一个脚本“Bird” ,挂载到小鸟物体上,加入如下代码:
当按下键盘上按键”Q“时,新建层的动画会停止,只保留”BaseLayer“层的动画。
这种方向可以有效地停止掉骨骼动画。 像CS类射击游戏中,通过混合动画,Base层中主要控制角色手部开枪射击等动画,在新建的混合层中控制脚步移动的动画,这种情况可以用上述的方法停止掉新建的混合动画层。 然而,对”移动旋转缩放 “ 类动画不能用这种方法!
本文需求中小鸟的这种 ”拍翅膀“ + ”拍翅膀“ 组合而成的动画,不能用设置权重weight的方式去停止动画 , 这是因为当你把新建的混合层动画权重设置成0时,物体会回到移动动画第一帧的位置,并不是在原点待命!
对于”骨骼动画“ + ”移动动画“ 这类的,我们可以这样解决:
1)在新建的混合层中添加一个空的动画State ,命名可随意为,并把write defaults 这个选项勾去掉;
2)在常用于播放动画的 animator.Play() 方法中有5个重载,其中有一个重载方法是可以自行决定动画从哪里开始播放的,调用此方法我们需要知道两个关键的数值:
stateNameHash 和 normalizedTime。
3)在停止动画前 先获取 ”Move“ 动画当前已经播放了多少(该值为0 到1 ,1 为100%,0.1为10%),即“normalizedTime”。获取代码如下,相关解释已经备注在代码里:
4)获取混合层中当前动画的 名字所对应的哈希值 => nameHash.
5)此时准备工作已经完成,下面贴出全部代码。小鸟飞行过程中按下 键盘”W“键,小鸟会保持“拍翅膀”状态 原地停止3秒,3秒后继续飞行。
其实在物体有固定移动路线时,给物体添加一个父节点,物体自身K骨骼动画,父节点K带动物体移动的动画也是可行的,停掉移动动画只需要禁用父节点的动画控制器即可,再次启动也就是把父节点的控制器再次启动,动画也能继承停止时刻的状态继续播放,在逻辑控制上简单很多,但是随意给物体添加一个父节点有时有打乱物体之间的结构规律,所以并不推荐这样做。
到此,功能已基本实现。
(有什么错误的地方也请各位大大不吝指出~~~)
-
vue 之 Transition && 各种动画实现,一文让你会动画
2022-05-30 15:02:40在开发中,如果没有动画的话,整个页面内容的显示和隐藏会非常的生硬!不好看,为了给予一定的用户体验,进入今天的主题 React框架本身并没有提供任何动画相关的API,所以如果需要使用的话可以使用一个第三方库...在开发中,如果没有动画的话,整个页面内容的显示和隐藏会非常的生硬!不好看,为了给予一定的用户体验,进入今天的主题
目录
5、Transition组件的duration属性( 用的比较少 )
- React框架本身并没有提供任何动画相关的API,所以如果需要使用的话可以使用一个第三方库react-transition-group
- Vue中为我们提供了一些内置的组件和对应的API来完成动画
一、Transition组件
1.Transition组件的原理
当插入或删除包含在transition组件中的元素时,vue将会做以下处理
就是 : 会自动把类加入到 transition组件下的根元素中,transition里面只能放单个标签( 组件 )
添加或者删除的class,常用的是如下六个
进入 :
离开 :
2、Transition组件中使用transition
代码
<template> <div class="box"> <button @click="isShow = !isShow">切换</button> <!-- 用 transition 包裹一下,取个名字run,类名的前缀就是run--> <transition name="run"> <!-- 内部元素或组件的显示和隐藏,会触发transition效果 --> <div v-if="isShow"> <span>123123123123</span> </div> </transition> </div> </template> <script> export default { data() { return { isShow: true }; } }; </script> <style lang="scss" scoped> // 元素开始进入的状态 | 元素离开结束的状态 .run-enter-from, .run-leave-to { opacity: 0; } // 元素进入结束的状态 | 元素开始离开的状态。 这里不写也可以!!!!!! .run-enter-to, .run-leave-from { opacity: 1; } // 元素进入 | 结束时,过渡的效果 .run-enter-active, .run-leave-active { // 过渡动画的使用 transition: opacity 2s linear 0s; } </style>
效果
说明
3、Transition组件中使用animation
代码
<style lang="scss" scoped> /** * 如果是动画效果,不止一个状态改变 * 就只需设置动态jike * */ .run-enter-active { animation: run-scale 1s linear 0s; } // 离开的时候设置成相反哒 .run-leave-active { animation: run-scale 1s linear 0s reverse; } @keyframes run-scale { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } </style>
效果
4、Transition组件的type属性
发生在 : 当我们同时使用transition和animation的情况下
代码
<style lang="scss" scoped> // 元素开始进入的状态 | 元素离开结束的状态 .run-enter-from, .run-leave-to { opacity: 0; } // 元素进入结束的状态 | 元素开始离开的状态 .run-enter-to, .run-leave-from { opacity: 1; } // 元素进入 | 结束时,过渡的效果 .run-enter-active, .run-leave-active { // 过渡动画的使用 transition: opacity 2s linear 0s; } .run-enter-active { animation: run-scale 2s linear 0s; } // 离开的时候设置成相反哒 .run-leave-active { animation: run-scale 2s linear 0s reverse; } @keyframes run-scale { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } </style>
效果
tip : Vue为了知道过渡的完成,内部是在监听transitionend和animationend
如果只使用了其中一个,Vue能自动识别类型和设置监听
但如果同时使用,可能会出现问题:
- 可能某一个动画执行结束,另外一个动画还没有结束 ( 时间设置的不一样 )
解决方案
- 设置type属性为transition和animation来明确指定告知vue监听的类型,以哪个时间为准
<template> <div class="box"> <button @click="isShow = !isShow">切换</button> <!-- 这里指定以哪个时间为标准 --> <transition name="run" type="transition || animation"> <div v-if="isShow"> <span>123123123123</span> </div> </transition> </div> </template>
题外话 :其实一般设置一样的时间,而且,有动画了为啥要设置过渡呢,是个神奇的属性~
5、Transition组件的duration属性( 用的比较少 )
基本设置 : 同时设置进入和离开的时间
<transition name="run" :duration="1000"> <div v-if="isShow"> <span>123123123123</span> </div> </transition>
一旦这么使用了,css中设置的 transitionend和animationend的时间就无效了,以duration时间为准
对象设置 : 分别设置进入和离开的时间
<transition name="run" :duration="{ enter: 800, leave: 1000 }"> <div v-if="isShow"> <span>123123123123</span> </div> </transition>
6、 Transition组件的mode属性
如果transition组件中包裹的是两个元素( 组件 ),相互显示,就会发生很丑的事情
代码
<template> <div class="box"> <button @click="isShow = !isShow">切换</button> <transition name="run"> <div v-if="isShow"> <span>one</span> </div> <div v-else> <span>two</span> </div> </transition> </div> </template> <script> export default { data() { return { isShow: true }; } }; </script> <style lang="scss" scoped> .run-enter-active { animation: run-scale 2s linear 0s; } // 离开的时候设置成相反哒 .run-leave-active { animation: run-scale 2s linear 0s reverse; } @keyframes run-scale { 0% { transform: scale(0); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } </style>
效果
缘由和解决
原因 : 因为默认情况下,进入和离开动画,是同时发生的
解决 : 设置mode属性
<transition name="run" mode="in-out || out-in"> <div v-if="isShow"> <span>one</span> </div> <div v-else> <span>two</span> </div> </transition>
mode : in-out
mode : out-in
7、 Transition组件的appear属性
如果想要一刷新页面就展示动画,需加上
<transition name="run" mode="out-in" appear> <div v-if="isShow"> <span>one</span> </div> <div v-else> <span>two</span> </div> </transition>
8、 Transition组件的回调函数
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled" :css="false" > <div v-if="isShow"> <span>one</span> </div> </transition>
:css="false". 会让Vue跳过css检测,提高性能,同时防止过渡过程中受css样式的影响
- before-enter : 动画进入之前触发 ---- from,初始化操作
- enter : 动画正在进入时触发 ---- active,写js,执行具体的动画
- after-enter : 动画进入之后触发 ---- to,结束,收尾工作
- enter-cancelled : 动画进入失败触发
- before-leave : 动画离开之前触发
- leave : 动画正在离开时触发
- after-leave : 动画离开之后触发
- leave-cancelled : 动画离开失败触发
el : 执行动画的那个元素
done : 当使用javaScript来执行过渡动画时,需要进行done回调,否则它们将会被同步调用,过渡会立刻完成
接下来使用其他封装好的第三方动画库啦~
二、使用animate.css第三方动画库
Animate.css | A cross-browser library of CSS animations.
1.安装
npm install animate.css
2.导入
在main.js中进行导入
import 'animate.css'
3.使用
01-在css中使用
代码
<template> <div class="box"> <button @click="isShow = !isShow">切换</button> <transition name="run" appear> <div v-if="isShow"> <span>one</span> </div> </transition> </div> </template> <script> export default { data() { return { isShow: true }; } }; </script> <style lang="scss" scoped> .run-enter-active { animation: lightSpeedInRight 2s linear 0s; } .run-leave-active { animation: lightSpeedOutRight 2s linear 0s; } </style>
效果
说明
02-使用class类名
这里需使用enter-active-class 和 leave-active-class,css部分可以不写啦
代码
可以不用写name了,如果写了class类名,类名的优先级会更高
<template> <div class="box"> <button @click="isShow = !isShow">切换</button> <transition enter-active-class="animate__animated animate__backInDown" leave-active-class="animate__animated animate__backOutLeft"> <div v-if="isShow"> <span>one</span> </div> </transition> </div> </template>
效果
说明
三、使用gsap库 ( JS库 )
某些情况下,如果希望通过JavaScript来实现动画效果,那么可以使用gsap库来完成
- GSAP : The GreenSock Animation Platform ( GreenSock动画平台 ) 的缩写
- 可以通过JavaScript为CSS属性、SVG、Canvas等设置动画,并且兼容浏览器
1.安装
npm install gsap
2.导入
在组件内部导入即可
import gsap from 'gsap'
3.使用
需要使用enter和leave回调函数
<template> <div class="box"> <button @click="isShow = !isShow">切换</button> <transition appear @enter="enter" @leave="leave" :css="false"> <div v-if="isShow"> <span>one</span> </div> </transition> </div> </template> <script> // 导入 import gsap from 'gsap' export default { data() { return { isShow: true } }, methods: { enter(el, done) { // 从哪里来 gsap.from(el, { // 缩小为0 scale: 0, // 透明度 opacity: 0, // 持续时间 duration: 1, // translatex便宜200 x: 200, // 这样设置比较好 onComplete: done }) }, /** * 这里只需要制定最开始的状态,不用制定后面的状态,有点不好理解 */ leave(el, done) { // 到哪里去 gsap.to(el, { scale: 0, opacity: 0, duration: 1, x: -200, onComplete: done }) } } } </script> <style lang="scss" scoped></style>
4.效果
5.gsap额外补充 ( 数字变化效果 )
代码
<template> <div class="box"> <input type="number" step="100" v-model="count" /> <div> <span class="text-color">{{ showNumber.toFixed(0) }}</span> </div> </div> </template> <script> import gsap from 'gsap' export default { data() { return { count: 0, showNumber: 0 } }, watch: { // 监听输入值的改变 count(newValue) { // 把当前this存进去,实时更改showNumber的值 gsap.to(this, { duration: 0.5, showNumber: newValue }) } } } </script> <style lang="scss" scoped> .box { padding: 200px; background-color: skyblue; box-shadow: 0 0 100px 0 skyblue; input { border: 3px solid rgb(7, 172, 237); border-radius: 10px; padding: 5px 10px; width: 100px; background-color: skyblue; } .text-color { display: inline-block; background-image: linear-gradient(to right, orange, purple); background-clip: text; color: transparent; font-size: 50px; } } </style>
效果
四、列表的过渡 transition-group
在上面的文章中,过渡动画只是针对单个元素或者单个组件的,如果希望渲染的是一个列表,并且该列表中添加、删除数据也希望有动画执行
使用 transition-group :
1.列表数字增加删除效果
01-代码
<template> <div class="box"> <div> <button @click="addNum">添加</button> <button @click="removeNum">删除</button> </div> <transition-group tag="p" name="run"> <span class="item" v-for="item in dataList" :key="item">{{ item }}</span> </transition-group> </div> </template> <script> export default { data() { return { dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9], defaultNumber: 10 } }, methods: { // 随机位置增加一个数字 addNum() { this.dataList.splice(this.randomIndex(), 0, this.defaultNumber++) }, // 随机位置删除一个数字 removeNum() { this.dataList.splice(this.randomIndex(), 1) }, // 随机取一个位置 randomIndex() { return Math.floor(Math.random() * this.dataList.length) } } } </script> <style lang="scss" scoped> .item { display: inline-block; margin-right: 10px; display: inline-block; background-image: linear-gradient(to right, orange, purple); background-clip: text; color: transparent; font-size: 30px; } .run-enter-from, .run-leave-to { opacity: 0; transform: translateY(50px); } .run-enter-active, .run-leave-active { transition: all 1s linear 0s; } </style>
效果
02.效果优化
优化点 : 新增和删除的节点是有动画,但是对于其他需要移动的节点是没有动画的
可以通过新增的v-move的class来完成动画,它会在元素改变位置的过程中应用
css代码
<style lang="scss" scoped> .item { display: inline-block; margin-right: 10px; display: inline-block; background-image: linear-gradient(to right, orange, purple); background-clip: text; color: transparent; font-size: 30px; } .run-enter-from, .run-leave-to { opacity: 0; transform: translateY(50px); } .run-enter-active, .run-leave-active { transition: all 1s linear 0s; } // 移除的时候需要加上 .run-leave-active { position: absolute; } // 加上这个 .run-move { transition: transform 1s linear 0s; } </style>
效果
03.增加洗牌效果
one-安装lodash库
npm install lodash
two-导入
import _ from 'lodash'
three-使用
<template> <div class="box"> <div> <button @click="addNum">添加</button> <button @click="removeNum">删除</button> <button @click="shuffleNum">洗牌</button> </div> <transition-group tag="p" name="run"> <span class="item" v-for="item in dataList" :key="item">{{ item }}</span> </transition-group> </div> </template> <script> import _ from 'lodash' export default { data() { return { dataList: [1, 2, 3, 4, 5, 6, 7, 8, 9], defaultNumber: 10 } }, methods: { // 随机位置增加一个数字 addNum() { this.dataList.splice(this.randomIndex(), 0, this.defaultNumber++) }, // 随机位置删除一个数字 removeNum() { this.dataList.splice(this.randomIndex(), 1) }, // 洗牌 shuffleNum() { this.dataList = _.shuffle(this.dataList) }, // 随机取一个位置 randomIndex() { return Math.floor(Math.random() * this.dataList.length) } } } </script> <style lang="scss" scoped> .item { display: inline-block; margin-right: 10px; display: inline-block; background-image: linear-gradient(to right, orange, purple); background-clip: text; color: transparent; font-size: 30px; } .run-enter-from, .run-leave-to { opacity: 0; transform: translateY(50px); } .run-enter-active, .run-leave-active { transition: all 1s linear 0s; } // 移除的时候需要加上 .run-leave-active { position: absolute; } // 加上这个属性 .run-move { transition: transform 1s linear 0s; } </style>
fore-效果
2.列表的交替动画效果
01-用css实现
代码
<template> <div class="box"> <input type="text" v-model="keyWords" /> <transition-group tag="ul" name="run" class="nav"> <li class="item" v-for="item in filterData" :key="item">{{ item }}</li> </transition-group> </div> </template> <script> export default { data() { return { keyWords: '', dataList: ['abc', 'bac', 'aec', 'qqw', 'qbf', 'aaa', 'afa'] } }, computed: { // 赛选一下 filterData() { return this.dataList.filter((item) => item.includes(this.keyWords)) } } } </script> <style lang="scss" scoped> .run-enter-from, .run-leave-to { opacity: 0; transform: translateX(100px) rotate(180deg); } .run-enter-active, .run-leave-active { transition: all 1s linear 0s; } .box { padding: 100px 0; background-color: skyblue; box-shadow: 0 0 100px 0 skyblue; display: flex; flex-direction: column; justify-content: center; align-items: center; input { border: 3px solid rgb(7, 172, 237); border-radius: 10px; padding: 5px 10px; width: 100px; background-color: skyblue; } .text-color { display: inline-block; background-image: linear-gradient(to right, orange, purple); background-clip: text; color: transparent; font-size: 50px; } } .nav { width: 100%; display: flex; list-style: none; margin: 0; padding: 0; text-align: center; .item { flex: 1; } } </style>
效果
ps : 那么是同时消失,同时出现,实现不了交替效果
02-使用js实现动画
通过delay属性,实现交替效果
代码
<template> <div class="box"> <input type="text" v-model="keyWords" /> <transition-group tag="ul" name="run" class="nav" @enter="enter" @leave="leave" appear> <!-- 使用data-*这样的属性,给每个动画元素加上index --> <li class="item" v-for="(item, index) in filterData" :data-index="index" :key="item"> {{ item }} </li> </transition-group> </div> </template> <script> import gsap from 'gsap' export default { data() { return { keyWords: '', dataList: ['abc', 'bac', 'aec', 'qqw', 'qbf', 'aaa', 'afa'], // 抽取一下动画参数 transitionOption: { opacity: 0, scale: 0.5, height: 0, rotate: 360 } } }, computed: { // 赛选一下 filterData() { return this.dataList.filter((item) => item.includes(this.keyWords)) } }, methods: { enter(el, done) { gsap.from(el, { ...this.transitionOption, // 设置延迟时间,因为是交替,所以每个都要不一样 delay: el.dataset.index * 0.2, xPercent: -20, onComplete: done }) }, leave(el, done) { gsap.to(el, { ...this.transitionOption, // 设置延迟时间,因为是交替,所以每个都要不一样 delay: el.dataset.index * 0.2, xPercent: 20, onComplete: done }) } } } </script> <style lang="scss" scoped> .box { padding: 100px 0; background-color: skyblue; box-shadow: 0 0 100px 0 skyblue; display: flex; flex-direction: column; justify-content: center; align-items: center; input { border: 3px solid rgb(7, 172, 237); border-radius: 10px; padding: 5px 10px; width: 100px; background-color: skyblue; } .text-color { display: inline-block; background-image: linear-gradient(to right, orange, purple); background-clip: text; color: transparent; font-size: 50px; } } .nav { width: 100%; // display: flex; list-style: none; margin: 0; padding: 0; text-align: center; position: relative; .item { flex: 1; } } </style>
效果
五、写在最后
🌟 🌟 谢谢聪明美丽帅气的你看到我的文章,支持一下可否
👍 👍 您的点赞,就是我动力的源泉,让我跨过彼岸
⭐️ ⭐️ 您的收藏,就是我期待的远方,让我目标坚定
✏️ ✏️ 您的评论,就是我心灵的医生,让我完善己身
-
Android之多个View同时动画
2016-09-04 18:29:21本文主要是记录开发过程中遇到的坑 动画是为了提高交互性而在应用里增加的,单个动画的实现有好几种方式,比如 (View).animate().scaleY(0.5f)....要实现多个view 同时动画,也提供了方法 AnimatorSet,比如这样的效本文主要是记录开发过程中遇到的坑
动画是为了提高交互性而在应用里增加的,单个动画的实现有好几种方式,比如
这是单个view属性动画的两种实现(View).animate().scaleY(0.5f).alpha(0.5f).translationX(100f).setDuration(500).start();
要实现多个view 同时动画,也提供了方法 AnimatorSet,比如这样的效果
先说坑,两个view,上面一个叫top,上移,变小;下面一个叫bottom,只有上移
首先,top 和 bottom 是两个单独的view,不能bottom里包含top,我一开始就是这么干的,结果无法实现同时动画。
上面的view黑色部分,如果没有view(view没有初始化,没有显示出来)top 在移上去后会有一个闪动,给加个背景,不让其消失就好了
android:background="@drawable/border_top" <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item > <shape > <stroke android:width="1dp" android:color="#00000000"/> </shape> </item> </layer-list> <!-- http://www.thinksaas.cn/topics/0/213/213132.html -->
布局文件(测试)<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout android:id="@+id/pic_take_pic_big_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:paddingBottom="@dimen/common_measure_6dp" > <ImageView android:id="@+id/pic_dynamic_lv3_item_like" android:layout_gravity="bottom" android:layout_width="@dimen/common_measure_40dp" android:layout_height="@dimen/common_measure_40dp" android:padding="@dimen/common_measure_10dp" android:src="@drawable/unlike" android:visibility="gone" /> </FrameLayout> <!-- dynamic 把这个控件放到屏幕最底下 --> <LinearLayout android:id="@+id/pic_dynamic_recycle_view" android:layout_width="match_parent" android:layout_height="@dimen/common_measure_184dp" android:layout_alignParentBottom="true" android:background="@color/white" android:orientation="vertical" android:paddingBottom="@dimen/common_measure_3dp" android:visibility="gone" > <TextView android:layout_width="match_parent" android:layout_height="50dp" android:background="#e5e5e5" /> </LinearLayout> </RelativeLayout>
动画AnimatorSet animatorSet; int drawableId; // 两个动画同时 TODO protected void showDynamic(int id) { drawableId = id; animatorSet = new AnimatorSet(); dynamicRecycleView.setVisibility(View.VISIBLE); dynamicRecycleView.post(new Runnable() { @Override public void run() { int height = dynamicRecycleView.getMeasuredHeight(); // view 移动 ObjectAnimator animator = ObjectAnimator.ofFloat(dynamicRecycleView, "translationY", height, 0f); // 移动 + 缩小 ObjectAnimator animator1 = ObjectAnimator.ofFloat(cameraView, "translationY", -(height - 10)); ObjectAnimator animator2 = ObjectAnimator.ofFloat(bigCameraView, "scaleX", 0.73f); ObjectAnimator animator3 = ObjectAnimator.ofFloat(bigCameraView, "scaleY", 0.73f); // 缩放中心 bigCameraView.setPivotX(bigCameraView.getMeasuredWidth() / 2); bigCameraView.setPivotY(bigCameraView.getMeasuredHeight()); bigCameraView.invalidate();//显示的调用invalidate animatorSet.play(animator1).with(animator2).with(animator3)// ; .with(animator); animatorSet.setDuration(600); // animatorSet.setInterpolator(new AccelerateDecelerateInterpolator()); animatorSet.addListener(showListener); animatorSet.start(); } }); } Animator.AnimatorListener showListener = new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { if(drawableId != -1) { bigCameraView.setImageResource(drawableId); } } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } }; protected void dismissDynamic(int id) { animatorSet = new AnimatorSet(); int height = dynamicRecycleView.getMeasuredHeight(); // 相对位置 ObjectAnimator animator = ObjectAnimator.ofFloat(dynamicRecycleView, "translationY", 0f, height); ObjectAnimator animator1 = ObjectAnimator.ofFloat(cameraView, "translationY", -height, 0f); ObjectAnimator animator2 = ObjectAnimator.ofFloat(bigCameraView, "scaleX", 0.73f, 1f); ObjectAnimator animator3 = ObjectAnimator.ofFloat(bigCameraView, "scaleY", 0.73f, 1f); animatorSet.play(animator1).with(animator2).with(animator3).with(animator); animatorSet.setDuration(600); animatorSet.setInterpolator(new AccelerateDecelerateInterpolator()); animatorSet.addListener(dismissListener); animatorSet.start(); if (id != -1) { bigCameraView.setImageResource(id); } } Animator.AnimatorListener dismissListener = new Animator.AnimatorListener() { @Override public void onAnimationStart(Animator animation) { } @Override public void onAnimationEnd(Animator animation) { dynamicRecycleView.setVisibility(View.GONE); } @Override public void onAnimationCancel(Animator animation) { } @Override public void onAnimationRepeat(Animator animation) { } };
-
Dotween动画系统
2022-04-10 11:25:41Dotween动画系统移动(Move)旋转(Rotate)震动(Shark)增量(Blend)材质(Material)相机(Camera)Text队列(Sequence)预添加设置参数SetEase设置运动方式回调函数控制函数获取数据类方法 移动(Move) //对物体进行... -
H5送鲜花、礼物动画(解决:多个动画同时渲染卡顿问题)
2019-01-03 16:13:25由于项目需要,要做一个送礼物的动画,而在项目开发过程中碰到了一些坑,现在记录下来难免以后再次跳坑。如有不足之处还请多多指教。 使用场景: 四个人斗地主,当你觉得哪个人打得好就可以送他一束鲜花,打行... -
CocosCreator操作Spine进行动画融合
2021-11-18 23:23:25一个骨骼上存在多个动画时,我们可以使用sp.setAnimation()进行动画播放 但是,直接使用sp.setAnimation()进行播放时,会出现动画切换僵硬的问题 如图所示,Idle在切换Wlaking过程中出现了明显的切换痕迹 这种... -
Compose 页面切换动画
2021-12-14 10:00:02Compose 页面切换动画 前因后果 Compose 正式版已经发布了一个多月了,从 Compose beta 版本发布之后各大网站中热度就一直不减,官方也一直在为开发者们推出学习 Compose 的文章,更加说明了 Android 开发的未来... -
Android 属性动画:一文让你彻底了解和掌握属性动画用法
2020-04-28 23:53:33本文目录属性动画概述属性动画用法对象动画(ObjectAnimator)方法1:Java代码实现对象动画方法2:XML实现对象动画值动画(ValueAnimator)PropertyValueHolder动画组合(AnimatorSet)差值器(Interpolator)估值器... -
导航栏同时缩放旋转(css3动画)
2018-09-21 11:27:51有时候看惯了墨守成规的导航栏,就突发奇想想要使自己的导航栏看上去酷炫与众不同。那么就看过来吧。 ...挥挥手指不带走一片云彩~ ...这种旋转出现的比较适合圆形...其实css3动画用得好,什么样的动画导航栏都可以做出来 -
微信小程序动画(七):让页面动起来
2022-01-17 10:08:48本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式 微信小程序动画(二):旋转 微信小程序动画(三):缩放 微信小程序动画(四):平移 微信小程序动画... -
动画与过渡(七)、为ViewGroup添加入场动画,LayoutAnimation使用概述
2021-11-08 23:24:59动画与过渡(二)、视图动画进阶:对Animation进行定义扩展 动画与过渡(三)、插值器和估值器概述与使用 动画与过渡(四)、使用Layout、offset、layoutParam实现位移动画 动画与过渡(五)、使用scrollTo、... -
Android动画(帧动画、补间动画、属性动画)讲解
2022-03-26 16:48:54** Android动画(帧动画、补间动画、属性动画)讲解 ** 首先我们来看看啥是帧动画、补间动画、...属性动画:帧动画与补间动画实现了对View进行移动、缩放、旋转和淡入淡出的效果。但对于android开发师来说是不够的,同 -
基于Spine动画的AVATAR换装系统优化
2021-12-15 21:07:49大家好,我是红孩儿,目前在... 很多游戏开发团队都正在使用Spine动画软件来制作人物AVATAR动画,作为一款广泛应用于游戏中的2D动画制作软件,Spine提供了良好的骨骼动画功能和库接口来实现人物AVATAR动画。 自... -
HarmonyOS之帧动画、数值动画、属性动画和组合动画的效果实现
2021-06-27 21:47:02Java UI 框架提供了帧动画、数值动画和属性动画,并提供了将多个动画同时操作的动画集合。 二、帧动画 帧动画是利用视觉暂留现象,将一系列静止的图片按序播放,给用户产生动画的效果。 在“Project”窗口,打开... -
多个属性动画同时执行的方法
2017-03-15 20:04:29用ValueAnimator ValueAnimator animator = ValueAnimator.ofFloat( ...//同时执行 animatorSet.playSequentially(animator1,animator2,animator3); //依次执行动画 animatorSet.start(); -
iOS之深入探究动画渲染降帧
2021-10-16 20:50:40所以给动画降帧,实际上是一种用体验换性能的决策,在动画不复杂但是数量很多的情况下(比如一些弹幕动画、点赞动画),给动画降帧并不会影响动画效果,此时降帧就能累计节约大量的 GPU 性能。 二、动画渲染对性能 -
Android 属性动画
2021-08-12 10:32:35Android属性动画制作,讲述一些关于属性动画制作常用的API,及简单描述如何制作属性动画,旨在引导入门。 -
动画:用动画给面试官解释 TCP 三次握手过程
2019-10-12 07:55:38来源 | 公众号:小鹿动画学编程 写在前边 TCP 三次握手过程对于面试是必考的一个,所以不但要掌握 TCP 整个握手的过程,其中有些小细节也更受到面试官的青睐。 对于这部分掌握以及 TCP 的四次挥手,小鹿将会以... -
Android的三种动画详解(帧动画、View动画、属性动画)
2019-06-21 22:54:03Android的动画分为了三种, 分别是 帧动画、View动画、属性动画。 1、帧动画 帧动画就是顺序播放一组预先定义好的图片,就类似于我们观看视频,就是一张一张的图片连续播放。 帧动画的使用很简单,总共就两个步骤... -
【微信小程序|组件库】自定义加载动画(1)
2021-04-30 15:56:12前言 ...通过查询可以得知,若是需要自己定义加载动画,一般的做法就是:在当前页面写加载动画的view代码,通过使用wx:if来控制该动画的显示。 &nb -
Android 动画之属性动画
2020-07-28 19:11:37即补间动画 只能够作用在视图View上,即只可以对一个Button、TextView、甚至是LinearLayout、或者其它继承自View的组件进行动画操作,但无法对非View的对象进行动画操作。 有些情况下的动画效果只是视图的某个属性... -
《Flutter 动画系列一》25种动画组件超全总结
2020-04-02 19:53:45动画运行的原理 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称“后... -
RecyclerView动画:属性动画
2019-08-08 21:43:42但是android并没有提供很多Api,让使用者来自定义动画。 为了更好的实现动画的自定义,必须查看RecyclerView动画的实现机制。在此基础上才能够有机会hook动画机制,从而实现更好的自定义。目前实现了动画的差值器... -
动画相关面试题
2021-12-15 20:17:30Android动画深入分析_gongjdde的博客-CSDN博客本章讲解:view动画,帧动画,动画使用特殊场景,属性动画,动画使用注意事项1.view动画:平移缩放旋转淡入淡出动画(补间动画),帧动画。补间动画动画集合示例:<?... -
Unity动画系统详解1:在Unity中如何制作动画?
2020-05-17 15:32:34Unity场景中的物体可以通过制作动画,让物体动起来。简单的动画如物体的移动、旋转(比如旋转的风扇、闪烁不定的灯泡等),复杂的动画如游戏中角色的动作、面部表情等。 洪流学堂,让你快人几步。你好,我是跟着大... -
用 JavaScript 实现时间轴与动画 - 前端组件化
2021-04-05 09:06:09我们一起来先实现一个动画库,一起来看一看我们应该如何去抽象这些开发组件所需要的底层能力。 -
Android属性动画完全解析(上),初识属性动画的基本用法
2015-04-09 09:56:15逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理。补间动画则是可以对View进行一系列的动画操作,包括淡入淡出、缩放、平移、... -
Unity动画系统详解3:如何播放、切换动画?
2020-05-31 19:37:49洪流学堂,让你快人几步。你好,我是跟着大智学Unity的萌新,我叫小新,这几周一起来复(yu)习(xi)动画系统。 大智:“小新,还记得Unity的动画来源有哪些么?” 小新:“有Unity中制作和外部导入两种,哦对!... -
Android开发——View动画、帧动画和属性动画详解
2016-10-02 19:28:10我们都知道Android动画分为三类:View动画、帧动画和属性动画。先对这三种动画做一个概述。View动画是一种渐进式动画,通过图像的平移、缩放、旋转和透明度等各种渐进式变换完成动画效果。帧动画是通过不停的切换...