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

  昨天老大给布置个任务,为我们的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: 昨天脑子被驴踢了才用自定义控件。。。

时间: 2024-10-02 16:10:07

类似小红书标签效果(补间动画)的相关文章

实现逐帧动画和补间动画两种动画效果

1.逐帧动画(Frame Animation)通常在Android项目的res/drawable/目录下面定义逐帧动画的XML模板文件.编码的时候,需要在动画模板文件的<animation-list>标签中依次放入需要播放的图片,并设置好播放的间隔时间. <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"

Android 之 补间动画

补间动画的优点是可以节省空间.补间动画与逐帧动画在本质上是不同的,逐帧动画通过连续播放图片来模拟动画的效果,而补间动画则是通过在两个关键帧之间补充渐变的动画效果来实现的.目前Android应用框架支持的补间动画效果有以下5种.具体实现在android.view.animation类库中. (1)AlphaAnimation: 透明度(alpha)渐变效果,对应<alpha/>标签. (2)TranslateAnimation: 位移渐变,需要指定移动点的开始和结束坐标,对应<transl

Android动画效果——1.帧动画2.补间动画3.跳转画面(三)

Android--动画效果1.帧动画2.补间动画3.跳转画面 插值器类 xml属性值 说明 LinearInterpolator @android:anim/linear_interpolatorr 动画以均匀的速度改变. AccelerateInterpolator @android:anim/accelerate_interpolator 在动画开始时改变速度较慢,然后开始加速. AccelerateDecelerateInterpolator @android:anim/accelerat

Android动画效果之Tween Animation(补间动画)(一)

前言: 最近公司项目下个版本迭代里面设计了很多动画效果,在以往的项目中开发中也会经常用到动画,所以在公司下个版本迭代开始之前,抽空总结一下Android动画.今天主要总结Tween Animation(补间动画). Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编码来做. 动画类型 XML配置方式 Java代码实现方式 渐变透明度动画效果 <al

Android开发之Tween(补间动画)完全解析(一)

欢迎转载,转载请注明出处:http://blog.csdn.net/dmk877/article/details/51912104 相信不管做了多长时间开发的人都用过Tween动画,从刚开始工作到现在我也是用了N次Tween动画,但是每一次使用总感觉掌握的不够全面,所以花了点时间详细的总结了下Tween动画,其实在android中熟练掌握动画,能够帮助我们实现一些非常酷炫的效果从而使我们的app在交互或者用户体验上有一个更好的体验,鉴于此详细的学习动画还是很有必要的,相信通过本篇的学习大家会对T

Android开发之Tween(补间动画)完全解析(下)

欢迎转载,转载请注明出处:http://blog.csdn.net/dmk877/article/details/51980734 在上一篇文章中,我们详细讨论了Tween动画的xml的实现以及interpolator的使用,相信通过上篇文章大家对Tween动画的xml属性的配置会有一个详细的理解,当然这篇文章也是承接上篇文章,所以强烈建议先阅读上篇文章:Android开发之Tween(补间动画)完全解析(上),这篇文章将从代码的角度实现上篇文章的效果.如有疑问请留言,如有谬误欢迎批评指正. T

android 动画(1) 补间动画

android动画: 3.0以前,android支持两种动画模式,tween animation,frame animation, 3.0中又引入了一个新的动画系统:property animation, 这三种动画模式在SDK中被称为 property animation,        属性动画: view animation,   补间动画:  给出两个关键帧,通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变. (Tween animation) drawable animatio

深入学习Phaser补间动画

Tweens是什么? Tweens通常被称为补间动画.补间动画是指在确定好两个关键帧之后,由计算机自动生成这两帧之间插补帧,从而实现动画的过程.例如,物体从当前位置在两秒内向右移动200个像素,只要设置好目标位置(当前位置的右边200像素)和时长(两秒),则计算机会自动生成补间动画,在两秒内使物体从当前位置移到目标位置. 创建一个Tween 补间的目标对象 最常见的创建一个补间动画的语句如下所示: var tween =this.game.add.tween(this.sprite).to({ 

【Android - 进阶】之Animation补间动画

补间动画也叫View动画,它只能针对View进行动画操作,且补间动画操作的只是View中可见的部分,即只操作界面,对于可点击区域等都不会进行操作. 在Android中,补间动画的顶级类是Animation.补间动画包括对View的透明度.缩放.平移.旋转进行动画操作,对应的JAVA类分别是AlphaAnimation.ScaleAnimation.TranslateAnimation.RotateAnimation. Android还提供了一个动画集合AnimationSet,可以将多个动画单体