【Android开源项目解析】背景有波浪效果的TextView——从Titanic项目学习BitmapShader的使用

最新推荐文章于 2021-09-22 23:15:38 发布

赵凯强

最新推荐文章于 2021-09-22 23:15:38 发布

阅读量6.9k

点赞数 4

分类专栏： Android开源项目解析文章标签：开源项目 textview github android

本文链接：https://blog.csdn.net/zhaokaiqiang1992/article/details/48252287

版权

Hello，好久没写文章了，有木有想我呀~
正式工作已经过去一个月了，发现在青岛实习和在北京工作，感觉完全不一样呢~
现在每天晚上回到住的地方，都累的想睡觉…所以也没心情写太多文章和大家分享了，不过我会尽快调整状态，重振雄风的！(哪里起来怪怪的…)

项目介绍

这篇文章，会介绍一个开源项目，叫做Titanic，是的，中文名就叫“泰坦尼克”…

下面是项目地址
https://github.com/RomainPiel/Titanic

要实现的效果是下面这样滴

我的想法

如果你是一个程序员，那么在你第一眼看到这个效果的时候，你可能会想，如果我要实现类似的效果，应该怎么做呢？

我不知道你们会有什么样的思路，我第一眼看到的时候，我想起了PorterDuffXfermode，前面是一张文字的图片，后面一张波浪的图片，然后设置相交模式，从而出现这种文字和图片的交叉效果，不断的改变后面图片位置，实现动态的效果。

当然，我只是想了一想，然后就抱着这个想法看源码去了，看完源码才发现，作者的实现思路更加的NB~通过BitmapShader实现了这种效果，下面，我会参照源码，给你介绍一下实现思路，非常简单，不要眨眼哦~

实现思路

Titanic这个项目非常的简单，只有两个类，分别是Titanic和TitanicTextView，那么如何使用呢？非常简单：

TitanicTextView tv = (TitanicTextView) findViewById(R.id.my_text_view);
        tv.setTypeface(Typefaces.get(this, "Satisfy-Regular.ttf"));
        new Titanic().start(tv);

如果你不想设置特殊字体，那么中间的代码删除也可以，两行代码搞定，是不是非常easy~

那么Titanic这个类是干嘛的呢？

为了方便理解和观看，我将不重要代码省略了，你可以对照源码观看
我们调用了Titanic的start()之后，就执行了下面的代码了：

public void start(final TitanicTextView textView) {

        final Runnable animate = new Runnable() {
            @Override
            public void run() {

                textView.setSinking(true);

                // horizontal animation. 200 = wave.png width
                ObjectAnimator maskXAnimator = ObjectAnimator.ofFloat(textView, "maskX", 0, 200);
                maskXAnimator.setRepeatCount(ValueAnimator.INFINITE);
                maskXAnimator.setDuration(1000);
                maskXAnimator.setStartDelay(0);

                int h = textView.getHeight();

                // vertical animation
                // maskY = 0 -> wave vertically centered
                // repeat mode REVERSE to go back and forth
                ObjectAnimator maskYAnimator = ObjectAnimator.ofFloat(textView, "maskY", h/2, - h/2);
                maskYAnimator.setRepeatCount(ValueAnimator.INFINITE);
                maskYAnimator.setRepeatMode(ValueAnimator.REVERSE);
                maskYAnimator.setDuration(10000);
                maskYAnimator.setStartDelay(0);

                // now play both animations together
                animatorSet = new AnimatorSet();
                animatorSet.playTogether(maskXAnimator, maskYAnimator);
                animatorSet.setInterpolator(