在android中对单个图像创建Cycle Tile效果

时间:2014-03-26 18:25:27

标签: android

我需要在android中的单个图像上开发Cycle Tile效果。

Cycle Tile windows 8 effect

参考应用:Flava™ - Note/Journal,他们在导航抽屉中使用Cycle Tile效果。

我尝试过动画(淡入/淡出),但我认为它与Cycle Tile效果不同。

我在网上搜索但没有发现任何与循环平铺有关的问题。

请帮忙。

1 个答案:

答案 0 :(得分:1)

我创建了一个小型演示来实现此效果。

我做的是,在抽屉打开时逐个显示图像动画。

不需要缩放动画。我只使用了TranslateAnimation。

以下是xml文件中的drawe布局代码:

<LinearLayout 
    android:id="@+id/left_drawer_layout"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:orientation="vertical">

    <ImageView 
        android:id="@+id/drawerImage"
        android:contentDescription="@string/app_name"
        android:layout_width="match_parent"
        android:layout_height="140dip"
        android:src="@drawable/ic_launcher"
        android:adjustViewBounds="false"
        android:cropToPadding="false"
        android:scaleType ="centerCrop"
    />
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>

</LinearLayout>

这是Java代码的一部分:

//global initializations
private TypedArray imgs;
private int imageNumber = 0;
int x = 35;
int y = -35;
Animation animation;

//overriden method
public void onDrawerOpened(View drawerView) {
    getActionBar().setTitle(mDrawerTitle);
    invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
    showAnimatedImages();
}

//put in onCreate
imgs = getResources().obtainTypedArray(R.array.drawer_images);

//method to show animated images
public void showAnimatedImages(){

    mDrawerImage.setImageResource(imgs.getResourceId(imageNumber, -1));
    animation = new TranslateAnimation(x, y, x, y);
    animation.setDuration(6000);
    animation.setFillAfter(true);
    mDrawerImage.startAnimation(animation);


    animation.setAnimationListener(new AnimationListener() {

        @Override
        public void onAnimationStart(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationRepeat(Animation animation) {
            // TODO Auto-generated method stub

        }

        @Override
        public void onAnimationEnd(Animation animation) {
            System.out.println(imageNumber);
            System.out.println(imgs.length());
            // TODO Auto-generated method stub
            if(imageNumber > imgs.length())
                imageNumber = 0;
            else
                imageNumber = imageNumber+1;

            int r = x;
            x = y;
            y = r;

            showAnimatedImages();   
        }
    });
}

我正在onAnimationEnd中交换x和y整数以反转方向。这意味着,第一个动画将从左上角到右下角显示,第二个动画将显示为副歌。 imageNumber增加,直到达到图像阵列的长度。之后再次从0开始。

如果您有任何疑问,请与我联系。

这不像那个应用程序那么顺利,但我希望它可以帮助你开始:)