显式动画

OpenHarmony动效示例-如何使用animateTo实现显式动画。 利用ArkUI组件不仅可以实现局部属性变化产生的属性动画,也可以实现父组件属性变化引起子组件产生过渡效果式的全局动画即显式动画。效果如图所示: 阅读详情

  • 属性动画

CAAnimationDelegate在任何头文件中都找不到,但是可以在CAAnimation头文件或者苹果开发者文档中找到相关函数。

当更新属性的时候,我们需要设置一个新的事务,并且禁用图层行为。否则动画会发生两侧,一个是因为显式的CABasicAnimation,另一次是因为隐式动画(关于隐式动画后面我会介绍)。

例如我们更改主视图的背景颜色:

CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"backgroundColor";
    animation.toValue = (__bridge id)color.CGColor;
    animation.delegate = self;
    //apply animation to layer
    [self.view.layer addAnimation:animation forKey:nil];
// 显式动画结束时调用。
- (void)animationDidStop:(CABasicAnimation *)anim finished:(BOOL)flag { //set the backgroundColor property to match animation toValue [CATransaction begin]; [CATransaction setDisableActions:YES]; self.colorLayer.backgroundColor = (__bridge CGColorRef)anim.toValue; [CATransaction commit]; }
使用代理时回调动画结束函数,要判断是哪个图层调用的。
注意:动画本身会作为一个参数传入委托的方法,也许你会认为可以控制器中把动画存储为一个属性,
然后回调比较,但是实际上并不起作用,因为委托传入的动画参数是原始值的深拷贝,
从而不是同一个值。
但当真正跑在iOS设备上时,我们发现在-animationDidStop:finished:委托方法调用之前,
指针会迅速返回到原始值,问题在于回调方法在动画完成之前已经被调用了,但不能保证这发生在属性动画
返回初始状态之前。这同时也很好地说明了为什么要在真实的设备上测试动画代码,而不仅仅是模拟器。

  • 关键帧动画

CABasicAnimation揭示了大多数隐式动画背后依赖的机制,这的确很有趣,但是显式地给图层添加CABasicAnimation相较于隐式动画而言,只能说费力不讨好。


CAKeyframeAnimation是另一种UIKit没有暴露出来但功能强大的类。和CABasicAnimation类似,CAKeyframeAnimation同样是CAPropertyAnimation的一个子类,它依然作用于单一的一个属性,但是和CABasicAnimation不一样的是,它不限制于设置一个起始和结束的值,而是可以根据一连串随意的值来做动画。


关键帧起源于传动动画,意思是指主导的动画在显著改变发生时重绘当前帧(也就是关键帧),每帧之间剩下的绘制(可以通过关键帧推算出)将由熟练的艺术家来完成。CAKeyframeAnimation也是同样的道理:你提供了显著的帧,然后Core Animation在每帧之间进行插入。

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
    animation.keyPath = @"backgroundColor";
    animation.duration = 2.0;
    animation.values = @[
                         (__bridge id)[UIColor blueColor].CGColor,
                         (__bridge id)[UIColor redColor].CGColor,
                         (__bridge id)[UIColor greenColor].CGColor,
                         (__bridge id)[UIColor blueColor].CGColor ];
    [self.colorLayer addAnimation:animation forKey:nil];
注意到序列中开始和结束的颜色都是蓝色,这是因为CAKeyframeAnimation并不能自动把当前值作为第一帧(就像CABasicAnimation那样把fromValue设为nil)。动画会在开始的时候突然跳转到第一帧的值,然后在动画结束的时候突然恢复到原始的值。所以为了动画的平滑特性,我们需要开始和结束的关键帧来匹配当前属性的值。

还可以使用贝塞尔曲线绘制曲线路径,然后沿着路径运动。
通过rotationMode自动对齐图层到曲线
  • 虚拟属性

之前提到过属性动画实际上是针对于关键路径而不是一个键,这就意味着可以对子属性甚至是虚拟属性做动画。但是虚拟属性到底是什么呢?

考虑一个旋转的动画:如果想要对一个物体做旋转的动画,那就需要作用于transform属性,因为CALayer没有显式提供角度或者方向之类的属性

toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI, 0, 0, 1)];
使用NAValue指定结构体类型值,byValue是叠加变换。一般我们使用

transform.rotation关键路径应用动画,而不是transform本身。
用transform.rotation而不是transform做动画的好处如下:
  1. 我们可以不通过关键帧一步旋转多于180度的动画。
  2. 可以用相对值而不是绝对值旋转(设置byValue而不是toValue)。
  3. 可以不用创建CATransform3D,而是使用一个简单的数值来指定角度。
  4. 不会和transform.position或者transform.scale冲突(同样是使用关键路径来做独立的动画属性)。

transform.rotation属性有一个奇怪的问题是它其实并不存在。这是因为CATransform3D并不是一个对象,它实际上是一个结构体,也没有符合KVC相关属性,transform.rotation实际上是一个CALayer用于处理动画变换的虚拟属性。

你不可以直接设置transform.rotation或者transform.scale,他们不能被直接使用。当你对他们做动画时,Core Animation自动地根据通过CAValueFunction来计算的值来更新transform属性。

CAValueFunction用于把我们赋给虚拟的transform.rotation简单浮点值转换成真正的用于摆放图层的CATransform3D矩阵值。你可以通过设置CAPropertyAnimation的valueFunction属性来改变,于是你设置的函数将会覆盖默认的函数。

【HarmonyOS】【应用开发】动画-属性动画与显式动画 官网对于属性动画的定义如下:组件的某些通用属性变化时,可以通过属性动画实现渐变过渡效果,提升用户体验。支持的属性包括width、height、backgroundColor、opacity、scale、rotate、translate等个人理解:属性动画针对的是同一个组件的属性变化情况,如在同一个页面中触发了组件的属性变化,这个变化需要以过渡的方式体现,这就需要属性动画来承接这个过渡过程,不然变化就会显得十分突兀与生硬。因此,只要组件的指定属性有变化,那么这个变化就会通过属性动画来体现。 阅读详情

相关推荐

第70节 制作显式动画

是一种用于开发鸿蒙应用的前端框架,它提供了丰富的动画能力,其中显式动画是其中一种重要的动画类型。:复杂的动画效果可能会消耗较多的系统资源。因此,在开发过程中需要注意性能优化,避免使用过多的动画效果或设置过长的动画持续时间。:在使用显式动画时,需要确保组件的状态与动画参数保持一致。例如,在动画执行完毕后,组件的状态应该更新为动画的终止状态。显式动画为开发者提供了一种灵活且强大的动画实现方式。:开发者在设置动画参数时,需要根据实际需求来选择合适的值。在这个示例中,点击按钮会触发动画,使按钮的宽度和高度在。

m0_60889254的博客 1157

OpenHarmony实战开发-如何使用显式动画 animateTo 实现左右地址交换动画。

本示例介绍使用显式动画 animateTo 实现左右地址交换动画。该场景多用于机票、火车票购买等出行类订票软件中。

2401_82546228的博客 532

鸿蒙开发动画:【显式动画】

提供全局animateTo显式动画接口来指定由于闭包代码导致的状态变化插入过渡动效。同属性动画,布局类改变宽高的动画,内容都是直接到终点状态,例如文字、canvas的内容、linearGradient等,如果要内容跟随宽高变化,可以使用[renderFit]属性配置。从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。本模块功能依赖UI的执行上下文,不可在UI上下文不明确的地方使用,参见[UIContext]说明。

2401_82772199的博客 763

Core Animation如何使显式动画结束时的值直接作用Layer

(1)使用隐式动画会直接改变layer的属性值,如: imageView.layer.opacity = 0.3;   (2)使用显式动画,动画结束时不影响动画前的layer属性值,如:       CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];     opacit...

移动开发 232

flutter 显式动画

前言 显示动画是需要我们手动控制的动画,AnimationController对象是我们控制显示动画的必不可少的控制器,跟全自动的隐式动画不同,显示动画可以实现组件属性的周期性变化,并且可以在任一中间时刻控制动画的暂停和切换,而隐式动画则更像是强制性的完成一次属性变化,例如透明度从0到1的变化,旋转角度,字体大小等的变化,我们无法在变化过程中对其进行控制,相比之下,显示动画就显得灵活很多,我们可以随时对动画进行控制,并且可以实现循环的,交错的变化效果。 跟隐式动画都是以Anminated..开头一样,Flu

智玲君 517

Flutter动画进阶:从显式到隐式

本文深入探讨了Flutter中的动画实现方式,从传统的显式动画到更高级的隐式动画。详细解析了如何在Flutter中使用`AnimationController`和`Tween`来创建、控制动画,并通过`AnimatedBuilder`和`TweenAnimationBuilder`来优化UI更新过程。文章还介绍了隐式动画的概念,并通过`AnimatedContainer`等内置widget展示了如何更简便地实现动画效果。

weixin_32005771的博客 315

iOS-Core-Animation-Advanced-Techniques(四)

隐式动画和显式动画 隐式动画 按照我的意思去做,而不是我说的。 -- 埃德娜,辛普森 我们在第一部分讨论了Core Animation除了动画之外可以做到的任何事情。但是动画师Core Animation库一个非常显著的特性。这一章我们来看看它是怎么做到的。具体来说,我们先来讨论框架自动完成的隐式动画(除非你明确禁用了这个功能)。 事务 Core Animatio

sunyazhou13的专栏 949

开源CMDB与资产管理平台对比报告

本文对比分析了9款主流开源CMDB平台,从集成能力、功能完整性和多语言支持三个维度进行评测。重点介绍了VeCMDB、蓝鲸CMDB、WeCMDB和OpsAny等国产平台的特色:VeCMDB以动态模型和自动发现见长;蓝鲸CMDB适合超大规模企业级应用;WeCMDB专注金融级高并发场景;OpsAny提供一体化运维解决方案。针对不同规模企业给出选型建议:中小团队推荐Snipe-IT等轻量工具;大型企业建议蓝鲸或WeCMDB;需国产化适配的可选VeCMDB或OpsAny。文章还特别指出iTop、GLPI等适合ITIL

huang0612123的博客 1081

【Flutter】显式动画

介绍了Flutter中显示动画的使用。

一以贯之的努力 不得懈怠的人生 1492

解密HDMI热插拔检测电路:从HPD引脚到EDID读取的全流程避坑

本文深入解析HDMI热插拔检测与EDID读取的全流程,从HPD引脚信号特性、DDC通道I2C协议到EDID数据结构,系统剖析了硬件电路设计、信号完整性和软件协议中的常见陷阱与解决方案,为消费电子设备开发者提供了一套完整的实战避坑指南。

weixin_29291069的博客 648

瑞芯微rv1126 rtsp+mpp+rga取流

瑞芯微rv1109 rtsp+mpp+rga取流

ZuoSeDiao的博客 6339

iOS 显式动画

###如果想让事情变得顺利,只有靠自己 – 夏尔·纪尧姆 上一章介绍了隐式动画的概念。隐式动画是在iOS平台创建动态用户界面的一种直接方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动画类型。在这一章中,我们将要研究一下显式动画,它能够对一些属性做指定的自定义动画,或者创建非线性动画,比如沿着任意一条曲线移动。 如果你依然在编程的世界里迷茫,不知道自己的未来规划,小编给大家推荐一个...

qq2899926939的博客 347

篮球比赛24秒计时器改造指南:用Multisim实现可调式倒计时系统

本文详细介绍了如何使用Multisim软件改造篮球比赛24秒计时器,实现可调式倒计时系统。从脉冲信号发生器到声光报警模块,提供了完整的电路设计方案和调试技巧,帮助开发者快速掌握数字电路设计的核心原理,提升体育电子设备开发效率。

wood5的博客 212

九.核心动画 - 显式动画

本篇博客介绍了两个最常用的显式动画,属性动画和关键帧动画。大家在实际开发过程中应该经常会使用到。接下来的博客我们会继续讨论显式动画,进行动画的组合,过渡动画,以及取消动画。

weixin_39339407的博客 921

程序员必备75道逻辑思维题(附答案)之二

逻辑训练 身为一个大数据工程师,平时的算法训练还是不能少的,今天给大家看几道我曾经看到的逻辑思维题觉得很好,想分享一下。 【6】一个球、一把长度大约是球的直径2/3长度的直尺.你怎样测出球的半径?方法很多,看看谁的比较巧妙 【7】五个大小相同的一元人民币硬币。要求两两相接触,应该怎么摆? 【8】猜牌问题 S先生、P先生、Q先生他们知道桌子的抽屉里有16张扑克牌:红桃A、Q、4 黑桃J、8、4、2、...

蛋蛋淡淡定的庄园 3547

Verilog数字钟

使用Verilog语言进行的数字钟的编写,FPGA开发板亲测正常 大学生一个,第一次自己做的东西,写出来分享在这里插入代码片一下,有不对的地方请大家批评指正。 这次的做的题是:设计一个数字钟,该数字钟能进行正常的时,分计时功能,且能对数字钟的时间进行调整。 该数字钟有3个按键,按键1为功能键,用于数字钟在“正常计时”,“时调整”,“分调整”这三个功能之间切换;按键2,3用于调整时间,仅当数字钟处于...

bin_bin_bun的博客 6149

鸿蒙 - arkTs:属性动画,显式动画,组件转场动画

鸿蒙 - arkTs:属性动画,显式动画,组件转场动画

Erek的前端博客; 3596

VS Code 配置 LaTeX 写作环境完全指南

本文详细介绍了如何在 VS Code 中配置 LaTeX 写作环境,涵盖了从安装必备组件到高级功能的全面指南。首先,用户需要安装 LaTeX 发行版(如 TeX Live 或 MiKTeX)和 VS Code 插件(如 LaTeX Workshop)。接着,通过修改 settings.json 和 keybindings.json 文件,用户可以自定义编译、查看快捷键等基础配置。文章还提供了高效写作技巧,如使用代码片段和多文件项目管理,并介绍了高级功能如反向同步、公式预览和参考文献管理。此外,针对常见问题(

weixin_70043030的博客 1984

ArkTS-属性动画和显式动画

鸿蒙开发-属性动画和显式动画

qq_41154522的博客 1849

RK356x U-Boot研究所(命令篇)3.7 pci与nvme命令的用法

RK356x U-Boot研究所(命令篇)3.7 pci与nvme命令的用法

Systemcall名屋 2084

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

HarmonyNext动画大全02-显式动画

上一篇文章我们介绍过属性动画animation的使用方法,那么本文就来学习和了解一下显示动画animateTo。

不懂先生的博客 759

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

Flutter 显式动画详解:打造灵动交互界面

Flutter 中的动画类型丰富,主要包括影视动画、显式动画、自定义影视动画、自定义显式动画以及 Hero 动画。上一篇文章讲解了影视动画,像等,它们能在属性改变时自动触发动画,但控制相对有限,主要用于简单场景。而显式动画则更灵活,开发者可通过手动控制动画的播放、暂停等操作。Tween可用于更灵活地定义动画的变化范围。在中,可通过Tween),),Flutter 的显式动画为开发者提供了丰富的创作空间,通过和各种动画组件,能实现旋转、透明度变化、缩放、位移等多样化效果,并可精细控制动画的各个方面。

m0_57836225的博客 1178

jdk-8u144-linux-x64.tar.gz.

该资源为搭建Linux系统Java环境用,资源的后缀为tar.gz格式的压缩包

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Flutter 动画(显式动画、隐式动画、Hero动画、页面转场动画、交错动画)

当前案例 Flutter SDK版本:3.13.2。

Lan_Se_Tian_Ma的博客 2427

极简实现酷炫动效:Flutter隐式动画指南第四篇之显式动画(Explicit Animations)

上一篇文章 介绍了Flutter中的隐式动画的用法。我们会发现隐式动画使用起来非常的方便,我们只需要设置动画的旧值变化之后的值,Flutter会帮助我们完整动画的中间过程。Flutter中隐式动画的实现是全自动的。今天我们介绍下Flutter中的显式动画。在Flutter中,显式动画(Explicit Animations)指的是那些需要你手动控制动画过程的动画。显式动画提供了更多的控制权,但也需要更多的代码和管理。

我叫柱子哥 1848

HarmonyOS-ArkUI: animateTo 显式动画

啊, 尽管有点糙,但还是解释一下吧, 显式动画里面的“显式”二字, 是程序员在代码调用的时候,就三令五申,明明白白调用动画API而创建的动画。这个API的名字就是: animateTo。这就是显式动画。说白了您可以大致理解为,显式动画,就是调用animateTo来完成的动画。好,接下来我们梳理一下这个方法!

童年纸飞机的博客 1047

核心动画(8)显式动画

核心动画(8)显式动画显式动画属性动画基础动画CAAnimationDelegate关键帧动画虚拟属性动画组过渡隐式过渡对图层树的动画自定义动画在动画过程中取消动画总结 显式动画 如果想让事情变得顺利,只有靠自己 – 夏尔·纪尧姆 上一章介绍了隐式动画的概念。隐式动画是iOS平台上创建动态用户界面的一种简单方式,也是UIKit动画机制的基础,不过它并不能涵盖所有的动画类型。在这一章中,我们将要...

kyl282889543的博客 313
上一篇: iOS RabbitMQ集成及使用
下一篇: 动画不常见属性笔记
_Understand
博客等级 码龄10年 10粉丝 16原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值