如何通過連續翻譯圖像來創建循環動畫？

repeating image

是有可能創建動畫這樣？

looping animation

2014-10-08 Egis

我想通了

MainActivity.java：

public class MainActivity extends Activity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     final int screenWidth = getScreenDimensions(this).x; 
     final int waveImgWidth = getResources().getDrawable(R.drawable.wave).getIntrinsicWidth(); 
     int animatedViewWidth = 0; 
     while (animatedViewWidth < screenWidth) { 
      animatedViewWidth += waveImgWidth; 
     } 
     animatedViewWidth += waveImgWidth; 


     View animatedView = findViewById(R.id.animated_view); 
     FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) animatedView.getLayoutParams(); 
     layoutParams.width = animatedViewWidth; 
     animatedView.setLayoutParams(layoutParams); 


     Animation waveAnimation = new TranslateAnimation(0, -waveImgWidth, 0, 0); 
     waveAnimation.setInterpolator(new LinearInterpolator()); 
     waveAnimation.setRepeatCount(Animation.INFINITE); 
     waveAnimation.setDuration(2500); 

     animatedView.startAnimation(waveAnimation); 
    } 

    public static Point getScreenDimensions(Context context) { 
     int width = context.getResources().getDisplayMetrics().widthPixels; 
     int height = context.getResources().getDisplayMetrics().heightPixels; 
     return new Point(width, height); 
    } 

}

activity_main.xml中：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" > 

    <View 
     android:id="@+id/animated_view" 
     android:layout_width="match_parent" 
     android:layout_height="74dp" 
     android:background="@drawable/wave_repeating_bg" /> 

</FrameLayout>

wave_repeating_bg.xml：

<?xml version="1.0" encoding="utf-8"?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
    android:src="@drawable/wave" 
    android:tileMode="repeat" />

繪製-xxhdpi/wave.jpg：
enter image description here

來源

2014-10-15 08:26:14 Egis

這是很好的，你想通了自己！但是，我們並不真正鼓勵「僅限代碼」答案。如果您有時間，請爲未來的讀者解釋一些關於代碼的邏輯，謝謝:) – 2014-10-15 08:38:53

感謝您的支持！我試着修改'animationViewWidth'來獲得不跨越屏幕寬度的動畫，但是我遇到了問題。你是否熟悉做事的好方法？通過java例程對XML中的佈局加權進行加權。 – ryanjdillon 2015-06-30 12:27:21

我也使用過這個，並且使用FrameLayout很重要，它不適用於我的RelativeLayout。謝謝！ – roepit 2016-04-20 12:55:58

下往上無限的動畫我實現這個方式。僅僅使用兩個圖像和一個接一個的動畫就太簡單了。

內MainActivity.java

 imageView_background1 = (ImageView) findViewById(R.id.imageView_background1); 
     imageView_background1.setVisibility(View.GONE); 
     imageView_background1.setVisibility(View.VISIBLE); 
     Animation mAnimation = new TranslateAnimation(
       TranslateAnimation.ABSOLUTE, 0f, 
       TranslateAnimation.ABSOLUTE, 0f, 
       TranslateAnimation.RELATIVE_TO_PARENT, 0f, 
       TranslateAnimation.RELATIVE_TO_PARENT, -1f); 
     mAnimation.setDuration(10000); 
     mAnimation.setRepeatCount(-1); 
     mAnimation.setRepeatMode(Animation.INFINITE); 
     mAnimation.setInterpolator(new LinearInterpolator()); 
     imageView_background1.setAnimation(mAnimation); 

     imageView_background2 = (ImageView) findViewById(R.id.imageView_background2); 
     imageView_background2.setVisibility(View.VISIBLE); 
     Animation mAnimation1 = new TranslateAnimation(
       TranslateAnimation.ABSOLUTE, 0f, 
       TranslateAnimation.ABSOLUTE, 0f, 
       TranslateAnimation.RELATIVE_TO_SELF, 1f, 
       TranslateAnimation.RELATIVE_TO_SELF, 0f); 
     mAnimation1.setDuration(10000); 
     mAnimation1.setRepeatCount(-1); 
     mAnimation1.setRepeatMode(Animation.INFINITE); 
     mAnimation1.setInterpolator(new LinearInterpolator()); 
     imageView_background2.setAnimation(mAnimation1);

內activity_main.xml中（使用相同的圖像都ImageView的）

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:background="@drawable/ic_splash_background"> 
    <ImageView 
     android:id="@+id/imageView_background1" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:background="@drawable/ic_splash_categories" /> 
    <ImageView 
     android:id="@+id/imageView_background2" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:background="@drawable/ic_splash_categories" /> 
</FrameLayout>

來源

2016-08-13 16:13:02

如何通過連續翻譯圖像來創建循環動畫？

回答

相關問題