14 岁以上的动画展示 Android
Animated reveal for 14+ Android
我正在处理在视图上叠加可绘制对象的任务,该视图为复选标记的绘制设置动画,如下面的视频所示 https://vid.me/MsQj
我没有执行此操作的首选方法,但它并没有按照我想要的方式出现,我试过了:
- 两个视图,每个视图的复选标记一侧都有一个动画显示,但是我被困在 "revealed with an animation" 因为我不能在 -21[=22= 上使用循环显示]
- 逐帧动画,这是最简单的,但如果可以通过编程方式完成,我不想为这个愚蠢的动画制作 60 张图像
- 在自定义视图上绘图canvas
我的问题是,有没有什么可以让我更轻松地完成这件事,还是我必须先解决它然后继续做下去
您可以创建一个自定义视图 class,其中包含由 ShapeDrawables, one for each leg of the tick. Expose the lengths of these two lines as properties of the class, and then use Property Animation 定义的两条线,以动画显示线的长度。
属性 动画足够灵活,可以处理各种属性的相当复杂的时间和顺序。在这种特殊情况下,您可能希望使用 AnimatorSet 对两行动画进行排序,以便第二行动画在第一行完成后开始。
感谢@SoundConception 的建议,我最终开发了一个自定义 View
,并发现 ObjectAnimator
在 Android
中非常强大。本质上,我们为勾选标记的第一行和第二行设置宽度,并使用动画师将这些属性的值从 0 更改为所需的值。
在 setter 上 属性,我们使 View
无效以使用新值重新绘制它并稍作调整我做了一个很好的视图,虽然它目前只有为我的特定布局工作(即它需要在偏移计算上做更多的工作)它能够用一些可定制的东西绘制一个动画复选标记。
准确的说,你可以设置线宽、颜色、长度和动画时间。触摸 java 文件,您可以更改插值器和所有其他内容。
希望代码,虽然没有真正评论,但可以作为尝试类似事情的人的基础。
例如,下面的代码会生成类似 this video 的内容,虽然不是真的因为我在测试不透明度和更细的线条,但你明白我的意思。
<coop.devtopia.CheckmarkView
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:id="@+id/view"
app:first_leg_length="50"
app:second_leg_length="100"
app:total_duration="1500"
app:stroke_width="20"
app:stroke_color="#22000000"/>
2015 年 4 月 2 日更新
我进一步研究了这个,并在 tick 中添加了动态偏移计算(奇特的居中方式),这意味着我们可以生成大复选标记、小复选标记、瘦或厚,颠倒或笔直,它们将在视图中居中。不能保证大于容器的复选标记相同,它们可能会被裁剪。
这里是为这个演示生成的几个复选标记,当然动画就像画出来的一样,效果非常赏心悦目并且资源友好。毕竟这是一个很有趣的课题。
我正在处理在视图上叠加可绘制对象的任务,该视图为复选标记的绘制设置动画,如下面的视频所示 https://vid.me/MsQj
我没有执行此操作的首选方法,但它并没有按照我想要的方式出现,我试过了:
- 两个视图,每个视图的复选标记一侧都有一个动画显示,但是我被困在 "revealed with an animation" 因为我不能在 -21[=22= 上使用循环显示]
- 逐帧动画,这是最简单的,但如果可以通过编程方式完成,我不想为这个愚蠢的动画制作 60 张图像
- 在自定义视图上绘图canvas
我的问题是,有没有什么可以让我更轻松地完成这件事,还是我必须先解决它然后继续做下去
您可以创建一个自定义视图 class,其中包含由 ShapeDrawables, one for each leg of the tick. Expose the lengths of these two lines as properties of the class, and then use Property Animation 定义的两条线,以动画显示线的长度。
属性 动画足够灵活,可以处理各种属性的相当复杂的时间和顺序。在这种特殊情况下,您可能希望使用 AnimatorSet 对两行动画进行排序,以便第二行动画在第一行完成后开始。
感谢@SoundConception 的建议,我最终开发了一个自定义 View
,并发现 ObjectAnimator
在 Android
中非常强大。本质上,我们为勾选标记的第一行和第二行设置宽度,并使用动画师将这些属性的值从 0 更改为所需的值。
在 setter 上 属性,我们使 View
无效以使用新值重新绘制它并稍作调整我做了一个很好的视图,虽然它目前只有为我的特定布局工作(即它需要在偏移计算上做更多的工作)它能够用一些可定制的东西绘制一个动画复选标记。
准确的说,你可以设置线宽、颜色、长度和动画时间。触摸 java 文件,您可以更改插值器和所有其他内容。
希望代码,虽然没有真正评论,但可以作为尝试类似事情的人的基础。
例如,下面的代码会生成类似 this video 的内容,虽然不是真的因为我在测试不透明度和更细的线条,但你明白我的意思。
<coop.devtopia.CheckmarkView
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_centerInParent="true"
android:id="@+id/view"
app:first_leg_length="50"
app:second_leg_length="100"
app:total_duration="1500"
app:stroke_width="20"
app:stroke_color="#22000000"/>
2015 年 4 月 2 日更新
我进一步研究了这个,并在 tick 中添加了动态偏移计算(奇特的居中方式),这意味着我们可以生成大复选标记、小复选标记、瘦或厚,颠倒或笔直,它们将在视图中居中。不能保证大于容器的复选标记相同,它们可能会被裁剪。
这里是为这个演示生成的几个复选标记,当然动画就像画出来的一样,效果非常赏心悦目并且资源友好。毕竟这是一个很有趣的课题。