Heim Web-Frontend HTML-Tutorial Android Animation动画详解(二): 组合动画特效_html/css_WEB-ITnose

Android Animation动画详解(二): 组合动画特效_html/css_WEB-ITnose

Jun 24, 2016 am 11:37 AM

前言

    上一篇博客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);    }
Nach dem Login kopieren

    注释我已经写得挺详细了,可以说,这种方法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>
Nach dem Login kopieren

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

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

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



二、 动画的重播

    重播动画,故名思议,就是动画重复播放。大家看下上面那个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>
Nach dem Login kopieren

这里我们指定了 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) {        }    }
Nach dem Login kopieren
第一个参数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>
Nach dem Login kopieren
<?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>
Nach dem Login kopieren

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

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

或者是:

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


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


Follow Me:

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

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


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

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

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was ist der Zweck des & lt; Fortschritts & gt; Element? Was ist der Zweck des & lt; Fortschritts & gt; Element? Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Was ist der Zweck des & lt; datalist & gt; Element? Was ist der Zweck des & lt; datalist & gt; Element? Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Meter & gt; Element? Was ist der Zweck des & lt; Meter & gt; Element? Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5? Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren? Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design? Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen? Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung? Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

See all articles