android 滾動手勢動畫

銳湃發表於2015-08-14
原文網址 : https://blog.csdn.net/chuyouyinghe/article/details/47658491
Android動畫

編寫:Andrwyw - 原文:http://developer.android.com/training/gestures/scroll.html

在Android中，通常使用ScrollView類來實現滾動（scroll）。任何可能超過父類邊界的佈局，都應該巢狀在ScrollView中，來提供一個由系統框架管理的可滾動的view。僅在某些特殊情形下，我們才要實現一個自定義scroller。本節課程就描述了這樣一個情形：使用 scrollers 顯示滾動效果，以響應觸控手勢。

為了收集資料來產生滾動動畫，以響應一個觸控事件，我們可以使用scrollers（Scroller或者OverScroller）。這兩個類很相似，但OverScroller有一些函式，能在平移或快速滑動手勢後，向使用者指出已經達到內容的邊緣。InteractiveChart 例子使用了EdgeEffect類（實際上是EdgeEffectCompat類），在使用者到達內容的邊緣時顯示“發光”效果。

Note: 比起Scroller類，我們更推薦使用OverScroller類來產生滾動動畫。OverScroller類為老裝置提供了很好的向後相容性。 另外需要注意的是，僅當我們要自己實現滾動時，才需要使用scrollers。如果我們把佈局巢狀在ScrollView和HorizontalScrollView中，它們會幫我們把這些做好。

通過使用平臺標準的滾動物理因素（摩擦、速度等），scroller被用來隨著時間的推移產生滾動動畫。實際上，scroller本身不會繪製任何東西。Scrollers只是隨著時間的推移，追蹤滾動的偏移量，但它們不會自動地把這些位置應用到view上。我們應該按一定頻率，獲取並應用這些新的座標值，來讓滾動動畫更加順滑。

理解滾動術語

在Android中，“Scrolling”這個詞根據不同情景有著不同的含義。

滾動（Scrolling）是指移動視窗（viewport）（指你正在看的內容所在的‘視窗’）的一般過程。當在x軸和y軸方向同時滾動時，就叫做平移（panning）。示例程式提供的 InteractiveChart 類，展示了兩種不同型別的滾動，拖拽與快速滑動。

  • 拖拽（dragging）是滾動的一種型別，當使用者在觸控式螢幕上拖動手指時發生。簡單的拖拽一般可以通過重寫GestureDetector.OnGestureListener 的 onScroll() 來實現。關於拖拽的更多討論，可以檢視拖拽與縮放章節。
  • 快速滑動（fling）這種型別的滾動，在使用者快速拖拽後，抬起手指時發生。當使用者抬起手指後，我們通常想繼續保持滾動（移動視窗），但會一直減速直到視窗停止移動。通過重寫GestureDetector.OnGestureListener的onFling()函式，使用scroller物件，可實現快速滑動。這種用法也就是本節課程的主題。

scroller物件通常會與快速滑動手勢結合起來使用。但在任何我們想讓UI展示滾動動畫，以響應觸控事件的場景，都可以用scroller物件來實現。比如，我們可以重寫onTouchEvent()函式，直接處理觸控事件，並且產生一個滾動效果或“頁面對齊”動畫(snapping to page)，來響應這些觸控事件。

實現基於觸控的滾動

本節講述如何使用scroller。下面的程式碼段來自 InteractiveChart 示例。它使用GestureDetector，並且重寫了GestureDetector.SimpleOnGestureListener的 onFling() 函式。它使用OverScroller追蹤快速滑動（fling）手勢。快速滑動手勢後，如果使用者到達內容邊緣，應用會顯示一種發光效果。

Note: InteractiveChart示例程式展示了一個可縮放、平移、滑動的表格。在接下來的程式碼段中，mContentRect表示view中的一塊矩形座標區域，該區域將被用來繪製表格。在任意給定的時間點，表格中某一部分會被繪製在這個區域內。mCurrentViewport表示當前在螢幕上可見的那一部分表格。因為畫素偏移量通常當作整型處理，所以mContentRect是Rect型別的。因為圖表的區域範圍是數值型/浮點型值，所以mCurrentViewport是RectF型別。

程式碼段的第一部分展示了onFling()函式的實現：

// The current viewport. This rectangle represents the currently visible 
// chart domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private RectF mCurrentViewport =
        new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);

// The current destination rectangle (in pixel coordinates) into which the
// chart data should be drawn.
private Rect mContentRect;

private OverScroller mScroller;
private RectF mScrollerStartViewport;
...
private final GestureDetector.SimpleOnGestureListener mGestureListener
        = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
        // Initiates the decay phase of any active edge effects.
        releaseEdgeEffects();
        mScrollerStartViewport.set(mCurrentViewport);
        // Aborts any active scroll animations and invalidates.
        mScroller.forceFinished(true);
        ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this);
        return true;
    }
    ...
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2,
            float velocityX, float velocityY) {
        fling((int) -velocityX, (int) -velocityY);
        return true;
    }
};

private void fling(int velocityX, int velocityY) {
    // Initiates the decay phase of any active edge effects.
    releaseEdgeEffects();
    // Flings use math in pixels (as opposed to math based on the viewport).
    Point surfaceSize = computeScrollSurfaceSize();
    mScrollerStartViewport.set(mCurrentViewport);
    int startX = (int) (surfaceSize.x * (mScrollerStartViewport.left -
            AXIS_X_MIN) / (
            AXIS_X_MAX - AXIS_X_MIN));
    int startY = (int) (surfaceSize.y * (AXIS_Y_MAX -
            mScrollerStartViewport.bottom) / (
            AXIS_Y_MAX - AXIS_Y_MIN));
    // Before flinging, aborts the current animation.
    mScroller.forceFinished(true);
    // Begins the animation
    mScroller.fling(
            // Current scroll position
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally zero and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset should be 800 pixels.
             */
            0, surfaceSize.x - mContentRect.width(),
            0, surfaceSize.y - mContentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            mContentRect.width() / 2,
            mContentRect.height() / 2);
    // Invalidates to trigger computeScroll()
    ViewCompat.postInvalidateOnAnimation(this);
}

當onFling()函式呼叫postInvalidateOnAnimation()時，它會觸發computeScroll()來更新x、y的值。通常一個子view用scroller物件來產生滾動動畫時會這樣做，就像本例一樣。

大多數views直接通過scrollTo()函式傳遞scroller物件的x、y座標值。接下來的computeScroll()函式的實現中採用了一種不同的方式。它呼叫computeScrollOffset()函式來獲得當前位置的x、y值。當滿足邊緣顯示發光效果的條件時（圖表已被放大顯示，x或y值超過邊界，並且app當前沒有顯示overscroll），這段程式碼會設定overscroll發光效果，並呼叫postInvalidateOnAnimation()函式來讓view失效重繪：

// Edge effect / overscroll tracking objects.
private EdgeEffectCompat mEdgeEffectTop;
private EdgeEffectCompat mEdgeEffectBottom;
private EdgeEffectCompat mEdgeEffectLeft;
private EdgeEffectCompat mEdgeEffectRight;

private boolean mEdgeEffectTopActive;
private boolean mEdgeEffectBottomActive;
private boolean mEdgeEffectLeftActive;
private boolean mEdgeEffectRightActive;

@Override
public void computeScroll() {
    super.computeScroll();

    boolean needsInvalidate = false;

    // The scroller isn't finished, meaning a fling or programmatic pan
    // operation is currently active.
    if (mScroller.computeScrollOffset()) {
        Point surfaceSize = computeScrollSurfaceSize();
        int currX = mScroller.getCurrX();
        int currY = mScroller.getCurrY();

        boolean canScrollX = (mCurrentViewport.left > AXIS_X_MIN
                || mCurrentViewport.right < AXIS_X_MAX);
        boolean canScrollY = (mCurrentViewport.top > AXIS_Y_MIN
                || mCurrentViewport.bottom < AXIS_Y_MAX);

        /*
         * If you are zoomed in and currX or currY is
         * outside of bounds and you're not already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && mEdgeEffectLeft.isFinished()
                && !mEdgeEffectLeftActive) {
            mEdgeEffectLeft.onAbsorb((int)
                    OverScrollerCompat.getCurrVelocity(mScroller));
            mEdgeEffectLeftActive = true;
            needsInvalidate = true;
        } else if (canScrollX
                && currX > (surfaceSize.x - mContentRect.width())
                && mEdgeEffectRight.isFinished()
                && !mEdgeEffectRightActive) {
            mEdgeEffectRight.onAbsorb((int)
                    OverScrollerCompat.getCurrVelocity(mScroller));
            mEdgeEffectRightActive = true;
            needsInvalidate = true;
        }

        if (canScrollY
                && currY < 0
                && mEdgeEffectTop.isFinished()
                && !mEdgeEffectTopActive) {
            mEdgeEffectTop.onAbsorb((int)
                    OverScrollerCompat.getCurrVelocity(mScroller));
            mEdgeEffectTopActive = true;
            needsInvalidate = true;
        } else if (canScrollY
                && currY > (surfaceSize.y - mContentRect.height())
                && mEdgeEffectBottom.isFinished()
                && !mEdgeEffectBottomActive) {
            mEdgeEffectBottom.onAbsorb((int)
                    OverScrollerCompat.getCurrVelocity(mScroller));
            mEdgeEffectBottomActive = true;
            needsInvalidate = true;
        }
        ...
    }

這是縮放部分的程式碼：

// Custom object that is functionally similar to Scroller
Zoomer mZoomer;
private PointF mZoomFocalPoint = new PointF();
...

// If a zoom is in progress (either programmatically or via double
// touch), performs the zoom.
if (mZoomer.computeZoom()) {
    float newWidth = (1f - mZoomer.getCurrZoom()) *
            mScrollerStartViewport.width();
    float newHeight = (1f - mZoomer.getCurrZoom()) *
            mScrollerStartViewport.height();
    float pointWithinViewportX = (mZoomFocalPoint.x -
            mScrollerStartViewport.left)
            / mScrollerStartViewport.width();
    float pointWithinViewportY = (mZoomFocalPoint.y -
            mScrollerStartViewport.top)
            / mScrollerStartViewport.height();
    mCurrentViewport.set(
            mZoomFocalPoint.x - newWidth * pointWithinViewportX,
            mZoomFocalPoint.y - newHeight * pointWithinViewportY,
            mZoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            mZoomFocalPoint.y + newHeight * (1 - pointWithinViewportY));
    constrainViewport();
    needsInvalidate = true;
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this);
}

這是上面程式碼段中呼叫過的computeScrollSurfaceSize()函式。它會以畫素為單位計算當前可滾動的尺寸。舉例來說，如果整個圖表區域都是可見的，它的值就簡單地等於mContentRect的大小。如果圖表在兩個方向上都放大到200%，此函式返回的尺寸在水平、垂直方向上都會大兩倍。

private Point computeScrollSurfaceSize() {
    return new Point(
            (int) (mContentRect.width() * (AXIS_X_MAX - AXIS_X_MIN)
                    / mCurrentViewport.width()),
            (int) (mContentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN)
                    / mCurrentViewport.height()));
}

關於scroller用法的另一個示例，可檢視ViewPager類的原始碼。它用滾動來響應快速滑動（fling），並且使用滾動來實現“頁面對齊”(snapping to page)動畫。


轉發：http://hukai.me/android-training-course-in-chinese/input/gestures/scroll.html

相關文章