Android的Titanic
这个图书馆是DEPRECATED的,因为我没有时间去修改它了。但是请随意浏览代码并将其复制到您的项目中,它仍然可以做到。
泰坦尼克号是一个重现这个效果的Android实验。
如何使用
添加TitanicTextView
到您的布局:
< COM .romainpiel.titanic.TitanicTextView
机器人:ID = “ @ + ID / titanic_tv ”
机器人:文本 = “ @串/加载”
机器人:layout_width = “ WRAP_CONTENT ”
机器人:layout_height = “ WRAP_CONTENT ”
机器人:文字颜色 = “#212121 “
android :textSize = ” 70sp “ />
开始动画:
泰坦尼克号= 新 泰坦尼克号();
泰坦尼克号。开始(myTitanicTextView);
如果要停止动画,您可能希望跟踪泰坦尼克号的实例。
要阻止它:
泰坦尼克号。取消();
它是如何工作的?
快速版
Titanic是通过在TextView TextPaint着色器的矩阵上应用动画翻译而获得的简单幻觉。
较不快速的版本
什么是着色器?
甲着色器是定义颜色跨度的类。它安装在Paint中。它通常遵循一定的策略,所以你有LinearGradient着色器,RadialGradient着色器BitmapShader着色器等...
着色器属性:
- 瓦片模式:如何在x和y轴上重复着色器颜色跨度。
- 局部矩阵:可用于在着色器上应用变换
你为什么用这些观念来欺骗我?
那么因为在这个实验中我们正在使用的是exaclty。
在TitanicTextView
,我们创建一个包含波位图的BitmapShader。
我们将tile模式设置为:
- X:
TileMode.REPEAT
。位图在x轴上重复 - Y:
Tilemode.CLAMP
。在y轴上的位图之外重复边缘颜色
我们有一个maskX
和一个maskY
变量来定义着色器的位置。所以onDraw()
我们每个人都会考虑这些值,并将着色器的本地矩阵转换到正确的位置。
我们还有一个变量offsetY
来使值maskY可用。所以当maskY等于0时,波就在视图的中心。
它如何动画?
该动画基于Android Animator API。我不会穿过那一部分。如果需要一些解释,请阅读文档。
在这个实验中有2个动画。
- 一个是将波水平从0移动到200(波位图的宽度)。
- 第二个是将波浪从下半部分垂直移动到上半部分。
为了使这些翻译动画化,我们所需要的就是将动画应用于maskX
和maskY
。着色器矩阵的位置将自动更新onDraw()
。