1. 程式人生 > >安卓圖片淡入淡出切換效果(支援迴圈)

安卓圖片淡入淡出切換效果(支援迴圈)

日前做專案重構,想在酒店介紹圖片展示裡增加些動畫,覺得淡入淡出的效果不錯,上網問度娘,找到一篇部落格寫的是我需要的答案  ,但是他是重寫一個Relativelayout,有幾張圖片就新建幾個Imageview,再把這些Imageview加到Relaytivelayout裡邊去,根據顯示的第幾張圖片,設定透明度來實現效果,看完之後覺得這種方法不太理想,少的幾張圖片倒不會出現什麼問題,但是圖片一旦多了,就可能造成記憶體溢位,於是我想到用兩張圖片交替出現通過屬性動畫來實現這個需求,下面貼上關鍵程式碼,

   主Activity

package com.lyf.gradientdemo;

import android.animation.Animator;
import android.animation.AnimatorInflater;
import android.animation.AnimatorListenerAdapter;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.widget.ImageView;

import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {
    private ImageView image1, image2;
    private ImageView[] imageViews = new ImageView[2];
    private int currentpos = 1;
    private Animator animator1, animator2;
    private int image[] = {R.mipmap.a04, R.mipmap.a05, R.mipmap.a06, R.mipmap.a07, R.mipmap.a08, R.mipmap.a09};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        image1 = (ImageView) findViewById(R.id.image1);
        image2 = (ImageView) findViewById(R.id.image2);
        imageViews[0] = image1;
        imageViews[1] = image2;
        image1.setImageResource(image[0]);
        image2.setImageResource(image[1]);
        animator1 = AnimatorInflater.loadAnimator(this, R.animator.out_anim);
        animator2 = AnimatorInflater.loadAnimator(this, R.animator.in_anim);
        animator1.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                currentpos++;
                if (currentpos % imageViews.length == 0) {
                    image1.setImageResource(image[currentpos % image.length]);
                } else if (currentpos % imageViews.length == 1) {
                    image2.setImageResource(image[currentpos % image.length]);
                }
                super.onAnimationEnd(animation);
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }
        });
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        animator1.setTarget(imageViews[(currentpos + 1) % imageViews.length]);
                        animator2.setTarget(imageViews[currentpos % imageViews.length]);
                        animator1.start();
                        animator2.start();
                    }
                });
            }
        }, 5000, 5000);
    }
}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

    <ImageView
android:id="@+id/image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0" /> <ImageView android:id="@+id/image1" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>
in_anim.xml
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:propertyName="alpha"
android:valueFrom="0"
android:duration="2000" android:valueTo="1" android:valueType="floatType" />

out_anim.xml
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="2000"
android:propertyName="alpha"
android:valueFrom="1"
android:valueTo="0"
android:valueType="floatType" />
圖片自己加幾張吧

相關推薦

圖片淡出切換效果支援迴圈

日前做專案重構,想在酒店介紹圖片展示裡增加些動畫,覺得淡入淡出的效果不錯,上網問度娘,找到一篇部落格寫的是我需要的答案  ,但是他是重寫一個Relativelayout,有幾張圖片就新建幾個Imageview,再把這些Imageview加到Relaytivelayout裡邊去

使用TransitionDrawable實現多張圖片淡出效果

歡迎介面想做出廣告頁自動輪播的效果,圖片切換的方式用淡入淡出的方式。這個在h5頁面很容易就實現了,但是在android介面中,很容易就想到了動畫animation動畫來實現,但是發現使用動畫的話,這種方式看起來不會自然,因為在呼叫statAnimation的時候

輪播滾動效果+動畫淡出切換圖片內含demo

起因: 做了個滾動效果,除了自適應以外,都和騰訊AI開發平臺的效果相似。主要技術點:1.動畫淡入淡出切換圖片2.輪播滾動效果 + hover改變選中滾動狀態3.文字切換展示1.動畫淡入淡出切換圖片(通過控制CSS來改變效果)JS程式碼:// 替換class達到淡入淡出的效果

網頁特效--圖片淡出效果

1.通過CSS實現圖片淡入淡出效果: 主要是應用到了CSS3的動畫特效中的animation-delay來打一個時間差,首先將第一張圖片的opacity(透明度)設定為1,其他的圖片則設定為0,在設定動畫時長時根據你要顯示的時間(如2s),則設定動畫時長為2s x 圖片張數,我的則是10s,相應

智慧社JS實現圖片淡出效果

我們在網站開發中有時會遇到圖片淡入淡出效果這樣的需求,我們首先來看下圖片剛開始處於模糊狀態的樣子: 接下來,我們把滑鼠放到圖片上,我們便可以看到圖片由模糊逐漸變的清晰,最後如下圖所示: 那麼這樣的效果,JS怎麼做到的呢,下面我粘出HTML、CSS及JS程式碼 <

JavaScript程式碼實現圖片延遲載入並淡出顯示效果

對於一個網站,最佔用頻寬,最影響頁面顯示速度的東西就是圖片。圖片是很重要的,有時是必須的,作為一個站長,我們是千方百計的使用各種技巧來優化圖片,我們可以使用 ImageOptim 或 TinyPNG

JQuery mouse..事件+元素顯示隱藏 切換 +淡出+滑動效果。(可以做一個ul li下拉框滑動收起效果:slideUp)

<1> 滑鼠事件   動畫   滑動   淡入淡出  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

vuejs 製作背景淡出切換動畫

安裝好vuejs之後,在components裡新增Background.vue 程式碼如下 <template> <div class="Background"> <div class="bg">

android【基礎】 style標籤應用與activity間的淡出切換

比如定義一個button,其不同的狀態下用到了一些不同的按鈕狀態的圖片, 在drawable目錄下定義一個button各種狀態時的樣式,button.xml <?xml version="1.0" encoding="utf-8"?> <s

在bootstrop中如何使用tab選項卡 實現淡出效果

1 選項卡功能可以通過Bootstrap中提供的相應元件實現 2 找到淡入淡出的效果 每一個class裡面加入一個 fade 在有聚焦的div裡面 不僅要加入fade 還要加入 in 3 <div class="container

js實現輪播圖--淡出效果

window.onload = function(){ mv.app.toBanner(); }; var mv = {}; mv.tools = {}; mv.ui = {}; //淡入淡出也算是是一個公用元件 mv.ui.fadein = function(obj)

Jquery和純JS實現輪播圖--淡出切換

之前有寫過一篇輪播圖,是左右切換式的,可以參考 Jquery和純JS實現輪播圖(一)–左右切換式 今天分享一下淡入淡出式的輪播圖,同樣也是用純js和Jquery兩種方法來實現: JQUERY實現

Drawable基礎知識總結----TransitionDrawable圖片淡出

效果圖: 功能介紹 自動輪播指定的圖片,並有倒計時,點選倒計時自動跳過(模擬跳過廣告功能),倒計時自動計算到0時,實現自動跳轉;給ImageView繫結圖片使用了background和src兩種屬性方法。 具體實現方法 在src資料夾下的draw

#Android筆記#popupwindow淡出動畫效果的研究

前幾天完成了底部選單欄的設計與功能的實現,其中就包括了其彈出效果的設定,下面就來分析一下: 實現步驟: 1.在res目錄下新建anim資料夾用來存放動畫相關的xml檔案。 2.新建xml檔案(push_bottom_in.xml,push_bottom_out.xm

Android 全仿To圈兒個人資料介面層疊淡出顯示效果

前幾天做的一個仿To圈個人資料介面的實現效果 下面是To圈的效果Gif圖: 做這個東西其實也花了一下午的時間,一開始思路一直沒理清楚,就開始盲目的去做,結果反而事倍功半。 以後要吸取教訓,先詳細思考清楚其中的邏輯關係,然後再開始動手寫程式碼,這樣比較容易理順。 可以看到實

利用jquery實現多張圖片淡出

功能描述: 圖片播放分為2個順序:正序和反序,正序就是從第一張到最後一張,然後再第一張,反序是從第一張開始,然後最後一張,再到第一張。 1:當沒有滑鼠操作時,圖片正序播放,每隔特定時間播放一次。 2:如果滑鼠從左向右滑動,則圖片跳過間隔時間,播放順序強制切換為正序,立即播放

用QT實現淡出效果

/* baseinfo.h  * 孤舟釣客  * 2011-07-21  */ #ifndef BASEINFO_H #define BASEINFO_H #include <QDialog> #include <QLabel> #include

中為View新增動畫效果尺寸縮放、透明度漸變、旋轉、移動

import android.view.View; import android.view.animation.AlphaAnimation; import android.view.animation.Animation; import android.view.anim

使用手機開發深度學習簡易教程Python3+Keras

本教程基於安卓手機平臺,在PyDroid3軟體上,使用Python3語言配合Keras框架開發深度學習。本文章主要涉及在手機上開發環境的搭建,以及簡單的示例程式碼,如果想深入研究開發,還需要讀者自己花些功夫了。不廢話,開始教程。。 準備工作 1、手上需要有一個安卓手機,最近兩年

[編譯] 5、在Linux下搭建APP的開發燒寫環境makefile版—— 在Linux上用命令列+VIM開發APP

星期三, 19. 九月 2018 02:19上午 - BEAUTIFULZZZZ 0)前言 本文不討論用IDE和文字編輯器開發的優劣,是基於以下兩點考慮去嘗試用命令列編譯安卓APP的: 瞭解安卓APP的編譯過程,瞭解IDE幹了什麼事; 放在打包伺服器上需要自動化生成APP的指令碼; 1)安裝配置環境