搜索
首页web前端html教程Android Animation动画详解(二): 组合动画特效_html/css_WEB-ITnose

前言

    上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了。如果你还不了解,那点链接过去研读一番,然后再过来跟着我一起学习如何把简单的动画效果组合在一起,做出比较酷炫的动画特效吧。


一、 动画的续播

    如题,大家想想,如果一个页面上包含了许多动画,这些动画要求按顺序播放,即一个动画播放完成后,继续播放另一个动画,使得这些动画具有连贯性。那该如何实现呢? 有开发经验或者是逻辑思维的人肯定会想,对动画进行监听啊,如果这个动画播放完了,再去播放另一个动画不就好了。

    Congratulations, 你和我想的是一样一样的。

    我们看下通过这种动画播放监听如何去做:

 private void continueAnim(){        // 先加载第一个动画        Animation translate = AnimationUtils.loadAnimation(getActivity(), R.anim.translate_animation);        // 在加载第二个动画        final Animation scale = AnimationUtils.loadAnimation(getActivity(), R.anim.scale_animation);        // 接下来,我们队第一个动画进行监听,当它播放完成后,我们播放第二个动画        translate.setAnimationListener(new Animation.AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {                imgView.startAnimation(scale);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });        imgView.startAnimation(translate);    }

    注释我已经写得挺详细了,可以说,这种方法so easy,没啥可说的。


    除了上面介绍的使用监听器监听动画播放结束之外,还有一个更easy方法,也是我们优先推荐使用的,那就是Animation Set。

    这里,我们要引入一个动画的属性:startOffset。 如何去使用呢?看下定义动画的代码:

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:fillafter="true" android:fillenabled="true">    <alpha android:fromalpha="0" android:toalpha="1" android:duration="3000"></alpha>    <translate android:duration="1000" android:fromxdelta="0" android:fromydelta="0" android:toxdelta="100" android:toydelta="100" android:startoffset="3000"></translate></set>

  仔细看下translate定义的动画,它其中就有一个属性startOffset,这个属性的值,其实就是alpha动画的duration的值,他的意思是,延迟三秒后播放,其实也就是第一个alpha动画播放完成后再播放。

Animation continueAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.continue_animation);imgView.startAnimation(continueAnim);

好啦,写到这,让我们看下运行的效果吧:



二、 动画的重播

    重播动画,故名思议,就是动画重复播放。大家看下上面那个gif的动态图,其实就是重复播放动画。那Android如何重复播放动画呢?

   其实very easy,因为Android本身为定义动画提供了两个属性repeatCount和repeatMode,只要为你的动画设置上这两个属性,那就ok了!

   为了方便记忆,让我们稍微看下代码吧:

    <translate android:duration="1000" android:fromxdelta="0" android:fromydelta="0" android:toxdelta="100" android:toydelta="100" android:repeatcount="5" android:repeatmode="restart"></translate>

这里我们指定了 repeatCount为5,则动画要播放5次,repeatMode为“restart”,则动画每次都是重复播放。repeatMode还有个取值“reverse”,这是指让动画倒叙播放。 看下效果。


三、 Activity的切换动画

    说道Activity切换动画,我想大家肯定都不陌生,比如你玩淘宝、美团啥的,你会发现它们的页面切换都是从右向左滑动进入的,这其实就是Activity切换动画的应用。或许大家初始会觉得挺难,但我要告诉你的是,其实这玩意真简单,如果你已经会了如何定义动画(特指补间动画),那么你只要再理解下一个方法??overridePendingTransition即可。

    先让我们一起看下这个方法的定义:

/**     * @param enterAnim A resource ID of the animation resource to use for     * the incoming activity.  Use 0 for no animation.     * @param exitAnim A resource ID of the animation resource to use for     * the outgoing activity.  Use 0 for no animation.     */    public void overridePendingTransition(int enterAnim, int exitAnim) {        try {            ActivityManagerNative.getDefault().overridePendingTransition(                    mToken, getPackageName(), enterAnim, exitAnim);        } catch (RemoteException e) {        }    }
第一个参数enterAnim就是说新的要启动的Activity进入时的动画,第二个参数exitAnim,说的其实是原先的Activity退出时的动画效果。

接下来让我们定义两个动画资源:fade_in.xml和hold_out.xml

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">    <alpha android:fromalpha="0.2" android:toalpha="1.0" android:duration="1000"></alpha></set>
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator">    <translate android:fromxdelta="0%p" android:toxdelta="100%p" android:duration="1000"></translate></set>

定义动画结束后,那我们只需要在启动新Activity或者结束Activity时,复写 overridePendingTransition方法,并传入动画就好啦:

Intent intent = new Intent(getActivity(),SecondActivity.class);startActivity(intent);overridePendingTransition(R.anim.fade_in,R.anim.hold_out);

或者是:

public void back(View view){        finish();        overridePendingTransition(R.anim.fade_in,R.anim.hold_out);}
看下效果吧:


有没有被惊叹道,原来就这么easy啊! 赶快自己也动手试下吧。


Follow Me:

    其实Android简单的动画就这么些个,复杂的动画无非也是把这些动画整合在一起使用而已,大家遇到复杂的动画不要太慌,只要分析清楚它的实现原理,一步步的来解锁,都是可以搞定的啦。

    之后,我会再写两篇博客,介绍我在开发过程中使用过的两次动画,当然,并不是很难的那种,只是分享经验而已,敬请期待,欢迎指点。


源码下载地址(免费):http://download.csdn.net/detail/zuiwuyuan/9047739

版权声明:本文为博主原创文章,未经博主允许不得转载。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML:建立网页的结构HTML:建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站:HTML的力量从文本到网站:HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言,通过标签和属性定义网页结构和内容。1)HTML通过标签组织文档结构,如、。2)浏览器解析HTML构建DOM并渲染网页。3)HTML5的新特性如、、增强了多媒体功能。4)常见错误包括标签未闭合和属性值未加引号。5)优化建议包括使用语义化标签和减少文件大小。

了解HTML,CSS和JavaScript:初学者指南了解HTML,CSS和JavaScript:初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色:构建Web内容HTML的角色:构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容,使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码:仔细观察术语HTML和代码:仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent,而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1)htmldefineswebpagertuctureduseTags.2)“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML,CSS和JavaScript:Web开发人员的基本工具HTML,CSS和JavaScript:Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

HTML,CSS和JavaScript的角色:核心职责HTML,CSS和JavaScript的角色:核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML容易为初学者学习吗?HTML容易为初学者学习吗?Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。