如何動畫從左到右移動全屏條紋

我想創建一個動畫，但我不知道如何開始使用它。 Here's this image。如何動畫從左到右移動全屏條紋

我想要紅色和條紋從左到右的動畫。（Translate）動畫對我而言並不新鮮。移動屏幕上的對象很容易，因爲我們背後有一個背景。在我的情況下，它應該是移動的背景。

如果我使用圖像，那麼將無法填充圖像在向右移動時留下的空白空間。一個想法是以編程方式最初用條紋填充屏幕，開始將它們從左向右移動，當一個開始離開屏幕時，然後在左側畫一條新線條，但考慮到條紋不是1px寬，我不知道如何做這個。

另一種方法是使用比屏幕寬2個條紋的圖像。 2條紋在左側不可見。一旦圖像移動到右側（動畫結束），我們重新開始動畫。我想知道這是否會導致任何中斷或對用戶來說看起來是否順暢。

任何想法？我應該使用引擎或類似的東西嗎？

來源

2016-01-06 erdomester

怎麼樣：創建一個白色的背景。在所需寬度的屏幕上等間隔添加紅色矩形。在屏幕左側創建一個矩形的另一個矩形。將所有條紋的位置向右轉換一個像素，並循環等於以像素爲單位的柄寬度的次數。然後重新開始，因爲您將再次回到您的初始圖像。 –

您可以使用只繪製矩形到畫布上的自定義繪製在畫布上的條紋。下面是一個基本的樣品，只是使用它像

BackgroundDrawable bg = new BackgroundDrawable(); 
anyView.setBackground(bg); 
bg.start();

這裏的基本工作落實：

public class BackgroundDrawable extends Drawable implements Runnable, Animatable { 
    private static final long FRAME_DELAY = 1000/60; 
    private boolean mRunning = false; 
    private long mStartTime; 
    private int mDuration = 1000; 

    private Paint mPaint; 
    private int mStripes = 7; 


    private void init() { 
     if (mPaint == null) { 
      mPaint = new Paint(); 
      mPaint.setColor(Color.WHITE); 
      mPaint.setAntiAlias(true); 
      mPaint.setStyle(Paint.Style.FILL); 
     } 
    } 

    @Override 
    public void draw(Canvas canvas) { 
     Rect bounds = getBounds(); 
     if (isRunning()) { 
      // animation in progress 
      final int save = canvas.save(); 

      long timeDiff = SystemClock.uptimeMillis() - mStartTime; 
      canvas.clipRect(bounds); 

      float progress = ((float) timeDiff)/((float) mDuration); // 0..1 

      float width = bounds.width()/(mStripes * 2); 

      for (int i = 0; i < mStripes * 2 + 2; i++) { 
       mPaint.setColor(i % 2 == 0 ? Color.RED : Color.WHITE); 
       canvas.drawRect(bounds.left + width * (i - 1) + progress * 2 * width, bounds.top, bounds.left + width * i + progress * 2* width, bounds.bottom, mPaint); 
      } 

      canvas.restoreToCount(save); 
     } else { 
      // todo draw normal 
     } 
    } 

    @Override 
    public void setBounds(int left, int top, int right, int bottom) { 
     super.setBounds(left, top, right, bottom); 
     init(); 
    } 

    @Override 
    public void setAlpha(int alpha) { 

    } 

    @Override 
    public void setColorFilter(ColorFilter colorFilter) { 

    } 

    @Override 
    public int getOpacity() { 
     return 0; 
    } 

    @Override 
    public void start() { 
     if (mRunning) stop(); 
     mRunning = true; 
     mStartTime = SystemClock.uptimeMillis(); 
     invalidateSelf(); 
     scheduleSelf(this, SystemClock.uptimeMillis() + FRAME_DELAY); 
    } 

    @Override 
    public void stop() { 
     unscheduleSelf(this); 
     mRunning = false; 
    } 

    @Override 
    public boolean isRunning() { 
     return mRunning; 
    } 

    @Override 
    public void run() { 
     invalidateSelf(); 
     long uptimeMillis = SystemClock.uptimeMillis(); 
     if (uptimeMillis + FRAME_DELAY < mStartTime + mDuration) { 
      scheduleSelf(this, uptimeMillis + FRAME_DELAY); 
     } else { 
      mRunning = false; 
      start(); 
     } 
    } 
}

另外，我寫了一篇關於可繪製和基本的動畫處理這裏的詳細說明：Custom drawables and animations。

來源

2016-01-06 21:59:22

我在哪裏把'findViewById（R.id.background）.setBackground（bg）; bg.start（）;'部分？什麼是BG？我在github上的示例應用程序中看不到這樣的實現 – erdomester

@erdomester剛剛更新了anser：'anyView'將是您想要背景的視圖（可能是您的根視圖），只需設置背景並調用對象的開始:) –

在此期間，我明白了。這很容易，我只是不耐煩。你能告訴我爲什麼第一條畫線是灰色的嗎？ – erdomester

您可以去自定義視圖或自定義繪製和油漆中的onDraw（）方法

來源

2016-01-06 21:36:52 ligi

如何動畫從左到右移動全屏條紋

回答

相關問題