ObjectAnimator 动画取消并恢复原位

最新推荐文章于 2021-12-16 12:11:55 发布
原创 最新推荐文章于 2021-12-16 12:11:55 发布 · 1w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在视频调用过程中，如何通过取消当前的ObjectAnimator动画，并使用ImageView对象平滑地将旋转角度重置为0度的方法。这一过程涉及到动画取消和设置新的动画参数。 
if (mVideoCallObjectAnimator != null) {
    mVideoCallObjectAnimator.cancel();
}
mVideoCallImageView.animate().rotation(0).setDuration(60).start();
今天困扰我的问题：使用Animator，动画结束后物体状态回归原位
Null
08-15 2768
动画为物体移出屏幕，而在动画结束后，物体回归到原点。【↑挂载到animator上的组件】
取消ObjectAnimator动画引起的一个小问题
城主的专栏
04-24 1679
需求背景 需求背景，取消当前的动画，重新开始倒计时动画。倒计时动画布局： <ProgressBar android:id="@+id/progress_voice" style="?android:attr/progressBarStyleHorizontal" android:layout_centerInParent="true" andr
ObjectAnimator和自定义清除、抖动功能Edittext
09-19
参考博客地址：http://blog.youkuaiyun.com/growing_tree/article/details/20365663
ObjectAnimator 动画后 恢复初始状态
Jason_HD的博客
04-28 1万+
位移后 恢复状态：mMiddleAvatar.setTranslationX(0); 改变透明度之后恢复：mMiddleAvatar.setAlpha(1.0f); 旋转后恢复：mMiddleAvatar.setRotation(0); 缩放后恢复： mMiddleAvatar.setScaleX(1.0f); mMiddleAvatar.setScaleY(1.0f); 取消 Ani...
属性动画ObjectAnimator 滑动恢复原位
Jason_HD的博客
03-21 2433
mMatchRatingRelativeLayout.setTranslationY(0); ObjectAnimator firstAllViewAnimation = ObjectAnimator.ofFloat(mMatchRatingFirstAllView, "alpha", 1.0f, 0.0f); ObjectAnimator matchRatingAvatarA...
博客<Animation动画详解(七)——ObjectAnimator基本使用>对应源码
02-27
博客动画详解(七)——ObjectAnimator基本使用>对应源码，博客地址：http://blog.youkuaiyun.com/harvic880925/article/details/50598322
Android PopupWindow被输入法弹上去之后无法恢复原位的解决办法
08-31
但当用户关闭输入法时，PopupWindow并未随之恢复到屏幕底部，而是停留在中间位置，下方显示的是Activity的背景。这种现象并不一致，可能在某些设备（如小米手机）上出现，而在其他设备（如三星Note）上表现正常。 ...
精选资源
Android模拟开关按钮点击打开动画（属性动画之平移动画）
01-20
此外，为了使动画看起来更自然，我们可以结合使用`AnimatorSet`来同时处理多个动画，比如在滑块移动的同时，让手指图像返回原位。我们可以通过`AnimatorSet.playTogether()`或`playSequentially()`来安排动画的执行...
Android ObjectAnimator如何回到起点
weixin_45131561的博客
04-23 724
if (mAnimator != null) { mAnimator.cancel(); mAnimator.start(); mAnimator.pause(); }
Android 实现可以暂停旋转的ObjectAnmition动画
zhuruicheng的博客
02-21 5523
Android 实现可以暂停旋转的ObjectAnmition动画
android 动态移动组件,android 组件动画移动后原位置不变的解决办法
weixin_39525007的博客
05-26 263
在做项目的时候发现给一些组件添加了移动动画，并且动画完之后停止在动画之后的位置之后再去点击组件的时候就点不到了，但是点移动之前原来的位置是可以，从网上查了一下，解决办法都是在动画完之后把LayoutParams重新设置一下，这里一定要注意，设置完之后一定要把动画再清除一下clearAnimation()，否则两个设置会叠加在一起：AnimatorSet animationSet = new Ani...
android 暂停函数,如何恢复和暂停Android中的ObjectAnimator API级别低于19？
weixin_29570795的博客
05-25 431
我知道API级别19支持ObjectAnimators上的pause()和resume().但是在API级别14的项目中,我有一个ObjectAnimator应用于Image视图来旋转它.我想在触摸时暂停ObjectAnimator提供的动画,并从图像视图所在的位置(触摸前)恢复它.所以我试图在我的stopAnimation()函数中保存当前的播放时间并取消对象动画.private void st...
android 动画后的位置,Android：Comp之后会重置动画位置
weixin_29025501的博客
05-25 421
Android：Comp之后会重置动画位置我正在使用xml定义的动画将视图滑出屏幕。 问题是，动画完成后，它将立即重置为其原始位置。 我需要知道如何解决这个问题。 这是xml：这是我用来调用它的Java：homeScrn = (View)findViewById(R.id.homescreen);slideLeftOut = AnimationUtils.loadAnimation(this, R...
属性动画设置延迟后，如果在未开始前取消，会执行onAnimationStart方法,特此记录
林萧的博客
06-30 7101
package com.example.lizheng_ds3.myapplication; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.animation.ObjectAnimator; import android.os.Bundle;
ObjectAnimator踩坑
热门推荐
无风全靠浪
07-19 5万+
移动translationX、translationY float translationX :表示在 X 轴上的平移距离,以当前控件为原点，向右为正方向，参数 translationX 表示移动的距离。 float translationY :表示在 Y 轴上的平移距离，以当前控件为原点，向下为正方向，参数 translationY 表示移动的距离。 例如： ObjectAnimato...
Android属性动画
lion_w的博客
09-02 638
属性动画(Property Animation)可以满足大部分的动画需求，可以改变该动画对象的大部分属性，例如Translate平移，Scale缩放，Rotate旋转，Alpha透明度。和补间动画(View Animation或者Tween Animation)的区别是，补间动画的属性改变了以后，如果对象在屏幕中的位置改变了，那么消息响应在屏幕上的位置仍然不变，也就是说变的仅仅只是对象在屏幕上显示
Animator动画被打断后恢复初始状态
Listenlsls的博客
12-16 3791
案例： 项目中一般会用Animator加controller的方式播放UI动画，一般的做法就是默认状态为没有动画的空State（UI页面一般默认状态可能是打开界面的动画，但不排除处于UI中的节点的情况），这时候如果打断动画包括隐藏物体，隐藏Animator，再显示的时候Animator是会自动进入默认状态的，但是时机物体各个节点的信息会处于被打断时的状态。 方案： 在隐藏物体前（对象池，ui隐藏等）播放并且Update默认状态，代码如下(PS：一定要在Animator隐藏之前调用)： public
我想在该动画执行结束后立刻恢复原位要怎么办呢
最新发布
05-13
<think>好的，我现在需要帮助用户解决在ArkTS中实现组件翻转动画结束后自动恢复原位的问题。用户之前已经询问过如何实现翻转动画，现在想在此基础上让动画结束后恢复原位。让我先回顾之前的对话，确保理解用户的需求。 用户提供的引用内容中有一个例子，使用animateTo并在onFinish回调中重置旋转角度，这可能对解决当前问题有帮助。用户当前的请求是让组件在翻转动画结束后自动回到原位，而不是停留在翻转后的状态。 首先，我需要考虑如何在动画完成后触发恢复原位的动作。根据之前的回答，用户已经使用了@State变量来控制旋转角度，比如angleY。当动画结束时，可能需要将angleY的值重置为0，或者通过另一个动画来反转之前的旋转。 在之前的回答中，用户使用了条件渲染来切换正反面，这可能涉及到在动画结束后切换状态变量isFront。但现在用户的需求是恢复原位，而不是切换内容。因此，重点应该放在旋转角度的重置上。 根据引用中的例子，onFinish回调可以用来在动画结束后执行某些操作，比如重置旋转角度。因此，可以在animateTo的配置中添加onFinish回调，将angleY设为0，这样组件就会回到原始位置。但需要注意，直接设置angleY=0可能不会有动画效果，只是瞬间恢复。如果用户希望恢复时有动画，可能需要另一个animateTo块来执行反向旋转。 或者，可能通过设置iterations和playMode属性，让动画自动反向播放。例如，设置iterations: 2和playMode: PlayMode.Alternate，这样动画会先正向播放，然后反向播放，回到原位。但用户的需求是动画结束后恢复，而不是来回播放两次，所以可能需要调整参数。 需要测试这两种方法：一种是使用onFinish回调触发另一个动画来恢复，另一种是利用动画配置自动反向。考虑到代码简洁性，第二种方法可能更高效。例如，设置iterations为2，playMode为Alternate，这样动画先旋转180度，再旋转回来。但这样动画时间会加倍，可能不符合用户预期。 另一种方法是使用单个animateTo，旋转180度，然后在onFinish中再启动另一个animateTo旋转回来。但这样需要处理两次动画，可能不够流畅。 或者，在onFinish中直接修改angleY为0，但由于之前的动画可能还在运行，需要确保状态正确。根据ArkTS的动画机制，当animateTo执行时，状态变化会被动画化。因此，在onFinish中直接设置angleY=0应该会触发一个动画回到原位，但需要确保此时没有其他动画干扰。 另外，用户可能希望动画结束后自动恢复，而不是等待点击事件。因此，需要在动画完成后自动触发恢复。例如，点击触发翻转动画，动画结束后自动恢复。或者，用户可能希望翻转动画完成后停留一段时间再恢复，这可能需要延迟设置。 结合引用中的例子，在onFinish中将旋转角度重置，并再次调用animateTo来执行恢复动画。但这样会导致两次动画，可能影响用户体验。或者，使用一个单一的动画序列，先翻转再翻转回来，可以通过设置iterations和playMode实现。 例如，设置duration为800ms，iterations为2，playMode为Alternate，这样动画会先旋转180度，再旋转回来，总时间为1600ms。但用户可能希望翻转后停留一段时间再恢复，这时需要调整delay参数。 可能需要进一步明确用户的需求：是立即恢复，还是在翻转后停留一段时间再恢复。根据问题描述，用户希望“结束后恢复原位”，可能意味着动画完成后立即恢复，或者在动画结束后自动触发恢复动画。 综合考虑，最直接的方法是在onFinish回调中将角度重置，并再次触发一个动画。或者，通过设置动画参数让一次动画包含恢复的动作。例如，使用关键帧动画，但ArkTS中可能不支持。因此，使用onFinish回调可能是可行的。 现在，我需要编写示例代码，演示如何在翻转动画结束后自动恢复原位。例如，当点击组件时，触发翻转动画，动画完成后自动恢复。可以使用onFinish回调，在第一个animateTo完成后，启动另一个animateTo将角度重置为0。 但这样代码会嵌套，可能不够优雅。或者，可以在一个animateTo中完成，通过调整角度变化。例如，将角度从0到180，然后在onFinish中再设置角度为0，并再次调用animateTo。但这样可能会有两次动画。 或者，使用状态变量控制，当动画结束时，触发状态变化，自动启动恢复动画。需要确保状态变化正确触发动画。 可能更简洁的方式是使用两次animateTo调用，第一次翻转，第二次恢复。例如： animateTo({ duration: 800, curve: Curve.EaseOut, onFinish: () => { animateTo({ duration: 800, curve: Curve.EaseOut }, () => { this.angleY = 0; }); } }, () => { this.angleY = 180; }); 这样，当第一次动画完成后，触发第二次动画恢复原位。但用户可能需要单次触发，比如点击一次后，组件翻转然后自动恢复。或者，用户可能希望自动恢复不需要用户再次点击。 根据问题描述，用户想要在动画结束后自动恢复，所以应该在动画完成后自动触发恢复。因此，在onFinish中启动恢复动画是可行的。 不过，这样的代码会有嵌套的animateTo，可能需要注意异步问题。但ArkTS的animateTo应该是异步的，可以安全地在onFinish中调用。 另一个方法是利用动画的iterations和playMode属性，如引用中的例子，设置iterations: 2和playMode: PlayMode.Alternate，这样动画会先正向播放，再反向播放，回到原位。例如： animateTo({ duration: 800, iterations: 2, playMode: PlayMode.Alternate, curve: Curve.EaseOut }, () => { this.angleY += 180; }); 这样，动画会先旋转180度，再旋转回来，总时间为1600ms。这可能更简洁，不需要嵌套animateTo调用，但总时间会加倍。用户是否接受这样的时间取决于需求。 用户可能需要单次动画结束后恢复，所以可能需要根据情况选择方法。 现在，我需要确定哪种方法更符合用户的需求。用户的问题是在动画结束后自动恢复原位，可能希望一次动画完成后立即恢复，或者翻转后停留一段时间再恢复。 例如，点击后翻转180度，停留片刻，然后自动恢复。这需要设置delay参数，或在onFinish中启动另一个带有delay的animateTo。 不过，用户的问题中没有提到停留时间，所以可能只需要立即恢复。因此，使用iterations和playMode可能更合适，或者使用onFinish回调中的animateTo。 根据引用中的例子，用户已经知道在onFinish中重置状态，但可能需要触发另一个动画。例如，在onFinish中将角度设置为0，但为了有动画效果，需要再次调用animateTo。 或者，当在onFinish中设置angleY=0时，如果不在animateTo块中，可能不会有动画，而是直接跳转。因此，必须将状态变化包裹在animateTo中才能有动画效果。 因此，正确的做法可能是在onFinish中启动另一个animateTo来恢复角度。 现在，编写代码示例： 在点击事件中，首先触发翻转动画： animateTo({ duration: 800, curve: Curve.EaseOut, onFinish: () => { // 翻转完成后启动恢复动画 animateTo({ duration: 800, curve: Curve.EaseOut }, () => { this.angleY = 0; // 恢复原位 }); } }, () => { this.angleY = 180; // 翻转180度 }); 这样，点击后组件翻转180度，耗时800ms，完成后立即启动另一个动画，恢复原位，耗时800ms。总时间1600ms，可能较长，但实现了自动恢复。 另一种方法是使用iterations: 2和playMode: PlayMode.Alternate，这样只需一个animateTo调用： animateTo({ duration: 800, iterations: 2, playMode: PlayMode.Alternate, curve: Curve.EaseOut }, () => { this.angleY += 180; }); 这样，动画会执行两次，第一次旋转180度，第二次反向旋转回到原位，总时间1600ms。但这样用户无法在中间停留，直接连续播放两次。 用户可能需要翻转后停留一段时间再恢复，例如翻转后停留0.5秒再恢复。这时需要在第一个动画完成后，延迟启动第二个动画。可以使用delay参数： animateTo({ duration: 800, curve: Curve.EaseOut, onFinish: () => { // 延迟500ms后恢复 setTimeout(() => { animateTo({ duration: 800, curve: Curve.EaseOut }, () => { this.angleY = 0; }); }, 500); } }, () => { this.angleY = 180; }); 但ArkTS中可能不支持setTimeout，或者需要确认是否有类似的延迟方法。或者，使用animateTo的delay参数： animateTo({ duration: 800, curve: Curve.EaseOut, onFinish: () => { // 启动恢复动画，延迟0ms，持续800ms animateTo({ duration: 800, delay: 500, // 停留500ms curve: Curve.EaseOut }, () => { this.angleY = 0; }); } }, () => { this.angleY = 180; }); 这样，第一个动画完成后，等待500ms再执行恢复动画。 但需要确认animateTo的delay参数是否在onFinish之后生效。实际上，delay参数是在动画开始前等待的时间，因此可能无法在onFinish中直接使用。因此，可能需要在onFinish中使用setTimeout或类似的延迟方法，但需要确认ArkTS支持哪些定时器函数。 在OpenHarmony的ArkTS中，可以使用setTimeout函数，因此可以这样写： onFinish: () => { setTimeout(() => { animateTo({ duration: 800, curve: Curve.EaseOut }, () => { this.angleY = 0; }); }, 500); } 这样，在翻转动画结束后等待500ms再执行恢复动画。 不过，用户的问题可能不需要停留，只需要在动画结束后立即恢复。因此，可以省略delay，直接在onFinish中启动恢复动画。 总结，两种主要方法： 1. 使用两个animateTo调用，第一个翻转，第二个恢复，通过onFinish链式调用。 2. 使用iterations和playMode让动画自动反向。 方法1更灵活，可以控制中间是否有停留，但代码稍复杂。方法2更简洁，但总时间较长且无法停留。 根据用户的具体需求选择。用户的问题描述是“结束后自动恢复原位”，可能希望立即恢复，因此方法2可能更合适，但总时间更长。如果用户希望动画完成后立即开始恢复，则方法1更合适。 现在，我需要将这两种方法都提供给用户，并说明各自的优缺点，让用户根据需求选择。 另外，用户可能需要恢复原位的动画曲线与翻转动画一致，或者不同，可以在第二个animateTo中设置不同的curve。 在示例代码中，应该展示这两种方法，并说明适用场景。 最后，确保代码正确，使用@State变量，正确设置rotate属性，并处理点击事件。 另外，注意组件的旋转中心是否正确设置为中心点，避免恢复时位置偏移。 综上所述，用户需要的是在翻转动画结束后自动恢复原位，可以通过链式调用animateTo或在单个animateTo中配置iterations和playMode实现。需要提供这两种方法的示例代码，并解释区别。</think>在ArkTS中实现组件翻转后自动恢复原位，可通过以下两种方法实现： ### 方法一：链式动画（推荐） 通过`onFinish`回调触发恢复动画，实现分阶段动画控制 ```typescript @State angleY: number = 0; build() { Column() { Text('Flip & Reset') .rotate({ y: this.angleY, centerX: '50%', centerY: '50%' }) .onClick(() => { // 第一阶段：翻转动画 animateTo({ duration: 800, curve: Curve.EaseInOut, onFinish: () => { // 第二阶段：恢复动画 animateTo({ duration: 800, curve: Curve.EaseInOut }, () => { this.angleY = 0; // 重置角度[^1] }) } }, () => { this.angleY = 180; // 执行180度翻转 }) }) } } ``` **特点**： - 明确分离翻转/恢复阶段 - 可独立设置各阶段动画参数 - 支持添加中间停留时间（通过`setTimeout`） ### 方法二：单动画周期 通过动画参数配置实现自动回弹 ```typescript animateTo({ duration: 1600, // 总持续时间 iterations: 2, // 执行2次 playMode: PlayMode.Alternate, // 交替播放模式[^2] curve: Curve.EaseInOut }, () => { this.angleY += 180; // 单次旋转180度 }) ``` **特点**： - 单次声明完成完整动画周期 - 自动计算中间过渡状态 - 适用于简单对称动画 ### 进阶方案：带停留时间的恢复 ```typescript animateTo({ duration: 800, onFinish: () => { setTimeout(() => { // 添加500ms停留 animateTo({ duration: 800 }, () => { this.angleY = 0 }) }, 500) } }, () => { this.angleY = 180 }) ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张海龙(Jason Zhang)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值