Android 应用的动画实践--View Animation篇

简介:

尝试搜索了一下android 动画的中文资料,很多都是一些枯燥的翻译api的一些文档,很少有系统讲解如何利用动画开发一个应用的资料,忽然,发现很多应用也不怎么注重动画在app的应用,想了想,自己尝试总结一下吧。因为,本人也不是什么动画制作师,没法把动画做得很绚丽,只好,利用内置的效果,进行简单加工,如何发挥,由各位的创意来定。鉴于,很多有关的android的动画资料里面,都是堆代码的,所以,全部代码均放在了github上面,查看完整代码可以移步到github上面去

特地说明一下,由于android 模拟器和录制工具的原因,例子展示中的gif 的抽筋播放效果不等同于实际效果,自己脑补把抽筋的部分去掉

在Android 里你能够使用的动画效果:

  • 平移

  • 缩放

  • 旋转

  • 透明

以上动画的基本使用就是本文的内容了。由于,本人的能力问题,实在搞不出让人眼前一亮的动画,就凑合着看着吧。不过,那些令人赞叹的动画效果的基础就是这些。

一般而言,要做动画的,需要封装点物理公式,用作为计算帧与帧间的数值计算,不过,如果,只是,为了搞些动画让app好用一些,倒不需要搞得这么复杂,android 官方api 已经封装好了一些常用的动画插值器。

默认内置7种类型的插值器,个人觉得,如果只是应用里面的一些动画的话这7个就够用了。

  1. AccelerateInterpolator

    加速          
    AccelerateInterpolator

  2. Decelerate

    减速          
    decelerate

  3. AccelerateDecelerateInterpolator

    开始,和结尾都很慢,但是,中间加速          
    accelerate_decelerate

  4. AnticipateInterpolator

    开始向后一点,然后,往前抛          
    AccelerateInterpolator

  5. OvershootInterpolator

    往前抛超过一点,然后返回来          
    overshoot

  6. AnticipateOvershootInterpolator

    开始向后一点,往前抛过点,然后返回来          
    anticipate_overshoot

  7. BounceInterpolator

    结束的时候弹一下          
    bounce

  8. LinearInterpolator

    匀速

以上动画都源自android官方api demo,用eclipse adt android 选择例子项目导航,然后,选择APIDEMOS 就能创建(什么没听说过?现在知道了吧。。。)

好了,虽然截取的gif 动画播放起来有点抽筋的感觉,接下来我们该如何在应用中使用这些知识呢?

目前讲解动画api 的资料比较多,这里就不在重复那些基础的知识了!

现在让我们学习一下,如何利用,平移,缩放,旋转创造出让人眼前一亮的动画.

为了,更有目的的使用动画,下面假想一个使用场景。

假想:商品购物车案例

Notice :为了方便看效果,动画延时时间将会设置的比较长。特地说明一下:假想就是随便想,切勿对号入座。

任务:

为了,让商城app有更好的交互效果,决定对购物车控件和商品控件上面加一些动画效果。

购物车动画设计方案:

利用,透明,平移,对购物车的出现和离开增加动画交互效果。

经过一番努力效果如下(凑合着看吧。。):

anim1

相关知识点

一些动画常用的通用基础属性:

Notice: 所谓通用就是说所有动画标签都适用于这些属性

  • android:duration 设置动画播放的时间

  • android:startOffset 设置动画的开始播放时间

  • andorid:interpolator 设置动画的插值器

  • android:repeatCount 动画播放的常用次数

  • android:repeatMode 动画重播的模式,即从头到尾,从头到尾,还是从头到尾,在从尾到头。

透明的使用:

<alpha />

value 从 0 (透明) 到 1 (不透明)在android中透明主要用于对view 淡入,淡出的效果控制主要有两个属性

  • android:fromAlpha view在动画开始的透明度。

  • android:toAlpha view在动画结束的透明度。

平移的使用:

<translate />

支持使用 %,如 “50%“ 获取的是这个view的百分之50,除此之外还有另外一种写法:”50%p“ 意思是获取这个view的上一级view的百分之50 当然,指定特定值也是支持的“22.2”,不过为了兼容更多的android设备建议还是使用百分比的值。

  • android:fromXDelta

  • android:fromYDelta

    from?Delta 意思是开始的轴线

  • android:toXDelta

  • android:toYDelta

    to?Delta 意思是结束的轴线

这次的方案展示了两个插值器的使用:

用于出现的:BounceInterpolator

用于离开的: AnticipateInterpolator

所谓插值器就是用于数值的起始间的变化,就是相当于一个类似于物理引擎的东西。android官方内置了一些简单常用的数值变换,让我们,不需要去学习相关的物理知识。

例如:

开始值为1,结束值为 100.那么我们如何控制变化这个值的变化过程呢?这里就是插值器的使用。

一般匀速的话就是:

1,2,3,4,5...100。 然后我们就会看到物体以一个匀速的速度进行平移操作。

那么我们需要物体像汽车那样加速度的前进,我们可以用加速插值器,我们从1到100的过程,就会是:

1,2,4,5,8,16.。。。。100 展示在我们面前的view对象就会以一个加速度的形式进行平移。

有很多应用开发者并不熟悉动画制作的一些基础知识,可能不太明白。现在,通过对源码进行分析,来彻底搞明白这个概念。

我们分析一些Interpolator 类树:

从api文档TimeInterpolator 我们可以知道,这个插值器的实现只有一个方法:

getInterpolation(float t);

然后我们挑选前面用过的BounceInterpolator 看下,它是如何实现这个方法。如果感兴趣的,可以按照这种方法,把其他几个插值器的实现都看一遍。

最后我们会发现,插值器的作用就是返回值。

接着我们来看下Animation line:869 是怎么用这个接口的.

看完这这几个地方,相信应该对android 动画框架怎么对值进行变换的原理应该有所了解。

有了以上知识,我们对android的动画框架基本上已经完全了解,现在,我们利用学到的知识,进行更好的动画设计。

我们接着刚才的案例,着手设计商品控件的动画设计

商品动画设计:

这次,我们学习一个新的动画标签缩放(<scale>)

效果如下:

shop1

<scale />

使view 大点或者小点

  • android:fromXScale

  • android:fromYScale

    from?Scale 意思是开始轴线的缩放比例(默认 1.0)

  • android:toXScale

  • android:toYScale

    to?Scale 意思是结束轴线的缩放比例(默认 1.0)

  • android:pivotX

  • android:pivotX

    旋转用的轴点坐标

最后我们把购物车的动画,和商品的动画在组合起来。效果如下:

添加商品的时候,如果购物车还没出现,先出现购物车显示的动画,在进行商品的动画播放。

具体实现 line: 77 -104


shop2

这次我们学习一下如何监听动画的动作,对于AnimationListener()主要有三个

  • onAnimationStart(Animation animation)

  • onAnimationRepeat(Animation animation)

  • onAnimationEnd(Animation animation)本文转自youxiachai 博客,原文链接:http://blog.51cto.com/youxilua/1213510   如需转载请自行联系原作者

相关文章
|
2月前
|
Android开发 开发者
Android利用SVG实现动画效果
本文介绍了如何在Android中利用SVG实现动画效果。首先通过定义`pathData`参数(如M、L、Z等)绘制一个简单的三角形SVG图形,然后借助`objectAnimator`实现动态的线条绘制动画。文章详细讲解了从配置`build.gradle`支持VectorDrawable,到创建动画文件、关联SVG与动画,最后在Activity中启动动画的完整流程。此外,还提供了SVG绘制原理及工具推荐,帮助开发者更好地理解和应用SVG动画技术。
128 30
|
2月前
|
Android开发 UED 计算机视觉
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
本文介绍了一款受游戏“金铲铲之战”启发的Android自定义View——线条等待动画的实现过程。通过将布局分为10份,利用`onSizeChanged`测量最小长度,并借助画笔绘制动态线条,实现渐变伸缩效果。动画逻辑通过四个变量控制线条的增长与回退,最终形成流畅的等待动画。代码中详细展示了画笔初始化、线条绘制及动画更新的核心步骤,并提供完整源码供参考。此动画适用于加载场景,提升用户体验。
287 5
Android自定义view之线条等待动画(灵感来源:金铲铲之战)
|
2月前
|
API Android开发 开发者
Android颜色渐变动画效果的实现
本文介绍了在Android中实现颜色渐变动画效果的方法,重点讲解了插值器(TypeEvaluator)的使用与自定义。通过Android自带的颜色插值器ArgbEvaluator,可以轻松实现背景色的渐变动画。文章详细分析了ArgbEvaluator的核心代码,并演示了如何利用Color.colorToHSV和Color.HSVToColor方法自定义颜色插值器MyColorEvaluator。最后提供了完整的源码示例,包括ColorGradient视图类和MyColorEvaluator类,帮助开发者更好地理解和应用颜色渐变动画技术。
|
2月前
|
Android开发
Android自定义view之利用PathEffect实现动态效果
本文介绍如何在Android自定义View中利用`PathEffect`实现动态效果。通过改变偏移量,结合`PathEffect`的子类(如`CornerPathEffect`、`DashPathEffect`、`PathDashPathEffect`等)实现路径绘制的动态变化。文章详细解析了各子类的功能与参数,并通过案例代码展示了如何使用`ComposePathEffect`组合效果,以及通过修改偏移量实现动画。最终效果为一个菱形图案沿路径运动,源码附于文末供参考。
|
2月前
|
XML Java Android开发
Android自定义view之网易云推荐歌单界面
本文详细介绍了如何通过自定义View实现网易云音乐推荐歌单界面的效果。首先,作者自定义了一个圆角图片控件`MellowImageView`,用于绘制圆角矩形图片。接着,通过将布局放入`HorizontalScrollView`中,实现了左右滑动功能,并使用`ViewFlipper`添加图片切换动画效果。文章提供了完整的代码示例,包括XML布局、动画文件和Java代码,最终展示了实现效果。此教程适合想了解自定义View和动画效果的开发者。
148 65
Android自定义view之网易云推荐歌单界面
|
2月前
|
XML 前端开发 Android开发
一篇文章带你走近Android自定义view
这是一篇关于Android自定义View的全面教程,涵盖从基础到进阶的知识点。文章首先讲解了自定义View的必要性及简单实现(如通过三个构造函数解决焦点问题),接着深入探讨Canvas绘图、自定义属性设置、动画实现等内容。还提供了具体案例,如跑马灯、折线图、太极图等。此外,文章详细解析了View绘制流程(measure、layout、draw)和事件分发机制。最后延伸至SurfaceView、GLSurfaceView、SVG动画等高级主题,并附带GitHub案例供实践。适合希望深入理解Android自定义View的开发者学习参考。
398 84
|
2月前
|
Android开发 开发者
Android SVG动画详细例子
本文详细讲解了在Android中利用SVG实现动画效果的方法,通过具体例子帮助开发者更好地理解和应用SVG动画。文章首先展示了动画的实现效果,接着回顾了之前的文章链接及常见问题(如属性名大小写错误)。核心内容包括:1) 使用阿里图库获取SVG图形;2) 借助工具将SVG转换为VectorDrawable;3) 为每个路径添加动画绑定属性;4) 创建动画文件并关联SVG;5) 在ImageView中引用动画文件;6) 在Activity中启动动画。文末还提供了完整的代码示例和源码下载链接,方便读者实践操作。
205 65
|
2月前
|
XML Java Maven
Android线条等待动画JMWorkProgress(可添加依赖直接使用)
这是一篇关于Android线条等待动画JMWorkProgress的教程文章,作者计蒙将其代码开源至GitHub,提升可读性。文章介绍了如何通过添加依赖库使用该动画,并详细讲解了XML与Java中的配置方法,包括改变线条颜色、宽度、添加文字等自定义属性。项目已支持直接依赖集成(`implementation &#39;com.github.Yufseven:JMWorkProgress:v1.0&#39;`),开发者可以快速上手实现炫酷的等待动画效果。文末附有GitHub项目地址,欢迎访问并点赞支持!
68 26
|
2月前
|
前端开发 Android开发 UED
讲讲Android为自定义view提供的SurfaceView
本文详细介绍了Android中自定义View时使用SurfaceView的必要性和实现方式。首先分析了在复杂绘制逻辑和高频界面更新场景下,传统View可能引发卡顿的问题,进而引出SurfaceView作为解决方案。文章通过Android官方Demo展示了SurfaceView的基本用法,包括实现`SurfaceHolder.Callback2`接口、与Activity生命周期绑定、子线程中使用`lockCanvas()`和`unlockCanvasAndPost()`方法完成绘图操作。
|
Android开发
Android Animation动画
Android Animation动画
184 0
Android Animation动画