您的位置:首页 > 其它

类似小红书标签效果(补间动画)

2016-01-14 17:56 288 查看
  昨天老大给布置个任务,为我们的app做下调研,app中有标签的存在,类似小红书和nice的添加标签模式,于是我就试着做出那个一闪一闪的标注点~

   仔细看了看小红书的闪闪的标签,得出一个结论: 它是个动画

   好吧,这简直是废话。

其实一开始我的思路是拿来主义,去网上找了找类似的“小红书标签效果”等等,然后我发现他们用自定义控件完成了一个这样的动画。。就这样,我华丽丽的跑偏了呃呃呃。。

   自定义控件我不熟啊!!

学。

花了半个下午研究自定义控件,好不容易写出了动画效果。

   这个效果的原理是这个样子滴:

用画笔画出一个圆,利用线程控制圆的半径和view的透明度。

    哇,好高兴哦~我做出来了,呵呵哒。

兴奋的把这个自定义控件使用到我的app中,很遗憾,第一次加载出这个view的时候它并不显示,控件所在window焦点状态改变一次时才会显示,心塞啊!!怎么办呢?

   问了前辈,说是view绘制时的问题,应该是线程的问题。

没办法,换个思路吧。

Android中不是有动画吗?试试?

于是,今天开始研究Android中的动画。

    我用的是补间动画,控制一个image的缩放和透明度。

很快就达到了我想要的效果,棒棒哒,闪闪的标记点上阵,感觉整个app页面都活起来了呢!!

其实特别简单哒:

      动画代码如下:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:repeatCount="infinite">   // android:repeatCount="infinite" 设置动画重复次数(infinite 表示重复无数次)
<scale  //缩放
android:fromXScale="1.0"    //fromXScale、fromYScale  动画开始时view大小(1.0表示原大小)
android:fromYScale="1.0"
android:toXScale="4.0"     //toXScale、toYScale view放大倍数
android:toYScale="4.0"
android:pivotX="50%"    //pivotX、pivotY  动画开始时基准(都设置为50%时在正中开始)
android:pivotY="50%"
android:repeatCount="infinite"
android:duration="1000"/>   //duration  动画持续时间
<alpha  //透明度
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:repeatCount="infinite"
android:duration="1000"/>

</set>


然后,给白色圆点(imageview)设置上这个动画就可以出现圆从小变大,逐渐透明的效果,就像叠加一样地在它上面添加一个不变的白点就是一个闪闪的标签啦~

是不是很简单~

ps: 昨天脑子被驴踢了才用自定义控件。。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: