WoWoViewPager 炫酷啊！

最新推荐文章于 2023-03-23 17:55:46 发布
最新推荐文章于 2023-03-23 17:55:46 发布
阅读量1k 收藏
点赞数
文章标签： viewPager 引导页

WoWoViewPager

WoWoViewPager App Intros Example WoWoViewPager CV Example

WoWo可以优化你的App介绍/引导页面，制作你的App简历。
WoWo将动画和viewpager结合起来。
当你滑动viewpager的时候，你也在控制动画的当前帧。
就好像控制动画时间一般。
比如上面的两个Gif，是先向前滑动然后向后滑动。

目录

English README
Gradle
备注
Demo
版本
Todo
License

动画用法

基本动画
  1. 位移动画
  2. 缩放动画
  3. 渐现、渐逝动画
  4. 旋转动画
文字大小动画
  1. TextView Size Animation
变色动画
  1. Background Color Animation
  2. TextView Color Animation
  3. Shape Color Animation
  4. State-List Color Animation
  5. Layer-List Color Animation
路径动画
  1. 路径动画
动画效果
  1. 缓动函数
  2. RGB or HSV

Gradle

直接在你的module的build.gradle的dependencies中加入“compile 'com.nightonke:wowoviewpager:1.0.1'”这行即可。

dependencies {
    ...
    compile 'com.nightonke:wowoviewpager:1.0.1'
    ...
}

备注

  1. 感谢 SCViewPager 带给我代码上的灵感。
  2. 感谢 JazzHands 带给我动画上的灵感。
  3. 更多的动画将会陆续加入。

Demo

你可以通过这个demo来查看所有WoWo支持的动画，并以不同的缓动效果和变色效果来查看动画效果。
你也可以在demo中找到App引导页例子和App简历例子。
WoWo V1.0.1
或者下载链接：
WoWo V1.0.1 in Github
WoWo V1.0.1 in Fir
Demo Animation Demo Ease Type

动画用法

基本动画

位移动画

位移动画可以让view动起来。
Translation animation

/**
 *
 * @param page                The translation animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The translation animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The translation animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromX               The starting horizontal position of this view 
                              relative to its left position, in pixels

 * @param fromY               The starting vertical position of this view 
                              relative to its top position, in pixels

 * @param targetX             The ending horizontal position of this view 
                              relative to its left position, in pixels

 * @param targetY             The ending vertical position of this view 
                              relative to its top position, in pixels

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoTranslationAnimation(
        0, 
        0f, 
        1f,
        findViewById(R.id.test).getTranslationX(),
        findViewById(R.id.test).getTranslationY(),
        -screenW / 2 + WoWoUtil.dp2px(40, this),
        -screenH / 2 + WoWoUtil.dp2px(40, this),
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoTranslationAnimation(
        1, 
        0f, 
        1f,
        -screenW / 2 + WoWoUtil.dp2px(40, this),
        -screenH / 2 + WoWoUtil.dp2px(40, this),
        screenW - WoWoUtil.dp2px(80, this),
        screenH - WoWoUtil.dp2px(80, this),
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

如你所见，上述代码实现了gif中一部分的效果，也就是从viewpager的第一页滑动到第三页的效果，共涉及两个位移动画。
更多示例，请查看 代码。

缩放动画

缩放动画实现view的缩小或放大。
Scale animation

/**
 *
 * @param page                The scale animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The scale animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The scale animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param targetScaleX        Target scale x = target x / original y

 * @param targetScaleY        Target scale y = target y / original y

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoScaleAnimation(
        3, 0f, 0.5f,
        2f,
        1f,
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoScaleAnimation(
        3, 0.5f, 1f,
        1f,
        2f,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

你可以将多种动画结合起来来实现复制的动画。比如，你可以用两个位移动画来创造一个折线动画。 正如上述代码，从viewpager第3页（注意这里从0数起）的0偏移量到0.5偏移量（也就是滑动的前一半路程），view的宽度翻倍。 然后，在0.5偏移量到1偏移量，也就是滑动的后一半路程，view的高度翻倍。
更多示例，请查看 代码。

渐现、渐逝动画

渐现、渐逝动画改变view的可见度，用来产生渐现、渐逝效果。
Alpha animation

/**
 *
 * @param page                The alpha animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The alpha animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The alpha animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromAlpha           Original alpha

 * @param targetAlpha         Target alpha

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoAlphaAnimation(
        3, 0f, 0.5f,
        1,
        0.3f,
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoAlphaAnimation(
        3, 0.5f, 1f,
        0.3f,
        1f,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

相信不用做太多解释。
更多示例，请查看 代码。

旋转动画

旋转动画，顾名思义。 Rotation animation

/**
 *
 * @param page                The alpha animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The alpha animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The alpha animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1
 *        _ _ _ _ _ _ _
 *      /|    x
 *     / |
 *    /  |y
 *   /   |
 *  /z   |
 * /     |
 *
 * @param pivotX              The x value of the pivot of this rotation animation

 * @param pivotY              The y value of the pivot of this rotation animation

 * @param targetX             The target degree on x axis

 * @param targetY             The target degree on y axis

 * @param targetZ             The target degree on z axis

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoRotationAnimation(
        0, 0f, 1f,
        pivotX, pivotY,
        0,
        0,
        180,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

上述的代码将导致view上下颠倒，注意在gif中，两个textview的轴心是不一样的。
更多示例，请查看 代码。

文字大小动画

TextView Size Animation

TextView文字大小动画帮助改变TextView内的文字大小。

/**
 *
 * @param page                The textview size animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The textview size animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The textview size animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromSize            Original text size in sp

 * @param targetSize          Target text size in sp

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoTextViewSizeAnimation(
        0, 0f, 1f,
        50,
        20,
        easeType,
        useSameEaseTypeBack));
animation.addPageAnimaition(new WoWoTextViewSizeAnimation(
        1, 0f, 1f,
        20,
        60,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

更多示例，请查看 代码。

变色动画

Background Color Animation

背景变色动画令view的背景色改变。
Background Color Animation

/**
 *
 * @param page                The background color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The background color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The background color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromColor           Original color

 * @param targetColor         Target color

 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoBackgroundColorAnimation(
        0, 0f, 1f,
        Color.parseColor("#ff0000"),
        Color.parseColor("#00ff00"),
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

注意背景变色动画只能改变有setBackgroundColor()函数的view。
更多示例，请查看代码。
什么是colorChangeType？

TextView Color Animation

TextView变色动画帮助改变字体颜色。

/**
 *
 * @param page                The textview color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The textview color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The textview color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromColor           Original color

 * @param targetColor         Target color

 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoTextViewColorAnimation(
        0, 0f, 1f,
        Color.parseColor("#ff0000"),
        Color.parseColor("#00ff00"),
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

注意该动画只能用于textview。
更多示例，请查看代码。
什么是colorChangeType？

Shape Color Animation

Shape变色动画帮助改变以shape-drawable为背景的view的颜色。

/**
 *
 * @param page                The shape-drawable color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The shape-drawable color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The shape-drawable color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromColor           Original color

 * @param targetColor         Target color

 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoShapeColorAnimation(
        0, 0f, 1f,
        Color.parseColor("#ff0000"),
        Color.parseColor("#00ff00"),
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

注意这个动画只能改变背景是shape-drawable的view的颜色。
也就是这样：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"  >
    <solid android:color="@color/red"/>
</shape>

更多示例，请查看 代码。
什么是colorChangeType？

State-List Color Animation

State-List变色动画帮助改变以state-list-drawable为背景的view的颜色。

/**
 *
 * @param page                The state-list-drawable color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The state-list-drawable color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The state-list-drawable color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromColor           Original colors, corresponding to the items in xml

 * @param targetColor         Target colors, corresponding to the items in xml

 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoStateListColorAnimation(
        0, 0f, 1f,
        new int[]{Color.parseColor("#ff0000"), Color.parseColor("#ff0000"), Color.parseColor("#ff0000")},
        new int[]{Color.parseColor("#00ff00"), Color.parseColor("#00ff00"), Color.parseColor("#00ff00")},
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

对应的drawable是：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape android:shape="rectangle"  >
            <corners android:radius="10dp" />
            <solid android:color="@color/red" />
        </shape>
    </item>
    <item android:state_focused="true">
        <shape android:shape="rectangle"  >
            <corners android:radius="2dp" />
            <solid android:color="@color/red"/>
        </shape>
    </item>
    <item >
        <shape android:shape="rectangle"  >
            <corners android:radius="2dp" />
            <solid android:color="@color/red"/>
        </shape>
    </item>
</selector>

注意这个动画只能改变以state-list-drawable为背景的view的颜色。
更多示例，请查看 代码。
什么是colorChangeType？

Layer-List Color Animation

Layer-List变色动画帮助改变以state-list-drawable为背景的view的颜色。

/**
 *
 * @param page                The layer-list-drawable color animation will start from 
                              page(0, 1, ..., adapter.getCount() - 1)

 * @param startOffset         The layer-list-drawable color animation will start from this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param endOffset           The layer-list-drawable color animation will end with this offset([0, 1]) 
                              when swiping from page to page + 1

 * @param fromColor           Original colors, corresponding to the items in xml

 * @param targetColor         Target colors, corresponding to the items in xml

 * @param colorChangeType     How to change the color. For more information, 
                              please check the ColorChangeType.class

 * @param easeType            Ease type, please check the ease type section

 * @param useSameEaseTypeBack Whether use the same ease type to back
 */
ViewAnimation animation = new ViewAnimation(findViewById(R.id.test));
animation.addPageAnimaition(new WoWoLayerListColorAnimation(
        0, 0f, 1f,
        new int[]{
          Color.parseColor("#000000"), 
          Color.parseColor("#ff0000"), 
          Color.parseColor("#00ff00"), 
          Color.parseColor("#00ff00"), 
          Color.parseColor("#ff0000")},
        new int[]{
          Color.parseColor("#0000ff"), 
          Color.parseColor("#00ff00"), 
          Color.parseColor("#ff0000"), 
          Color.parseColor("#ff0000"), 
          Color.parseColor("#00ff00")},
        colorChangeType,
        easeType,
        useSameEaseTypeBack));
wowoViewPager.addAnimation(animation);

对应的drawable是：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item1"
        android:top="0dp" android:left="0dp" android:bottom="0dp" android:right="0dp">
        <shape android:shape="rectangle">
            <size android:width="200dp"
                android:height="200dp"/>
            <solid android:color="@color/black"/>
        </shape>
    </item>

    <item
        android:id="@+id/item2"
        android:top="20dp" android:left="20dp" android:bottom="100dp" android:right="100dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/red"/>
        </shape>
    </item>

    <item
        android:id="@+id/item3"
        android:top="20dp" android:left="100dp" android:bottom="100dp" android:right="20dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/green"/>
        </shape>
    </item>

    <item
        android:id="@+id/item4"
        android:top="100dp" android:left="20dp" android:bottom="20dp" android:right="100dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/green"/>
        </shape>
    </item>

    <item
        android:id="@+id/item5"
        android:top="100dp" android:left="100dp" android:bottom="20dp" android:right="20dp">
        <shape android:shape="rectangle">
            <size android:width="80dp"
                android:height="80dp"/>
            <solid android:color="@color/red"/>
        </shape>
    </item>
</layer-list>

注意该动画只能改变以state-list-drawable为背景的view的颜色。
更多示例，请查看 代码。
什么是colorChangeType？

路径动画

路径动画

路径动画可以帮助画一条路。
而且你还可以为这条路加一个头：
Ease
你需要做的是：

在xml中加入这个：
<com.nightonke.wowoviewpager.WoWoPathView
    android:id="@+id/pathview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    app:pathColor="@color/white"
    app:pathWidth="5"
    app:headImageId="@drawable/airplane"
    app:headImageWidth="240"
    />

改变对应的属性：

属性描述类型
app:pathColor路径颜色resource of color
app:pathWidth路径宽度float
app:headImageId路径头图像resource of image
app:headImageWidth路径头宽度float
app:headImageHeight路径头高度float
创造一条路径：

你必须先简单了解 Path。
我建议你使用 cubicTo 函数来画曲线，用 lineTo 函数来画直线。
你可以通过以下网站来获得cubicTo函数的6个参数：
Canvature
BezierTool
正如上面的gif，这条路径其实由3条曲线组成：

WoWoPathView pathView = (WoWoPathView)findViewById(R.id.pathview);
ViewGroup.LayoutParams layoutParams = pathView.getLayoutParams();
layoutParams.height = screenH;
// set the pathView a little wider,
// then the airplane can hide
layoutParams.width = screenW + 200;
pathView.setLayoutParams(layoutParams);

// use this to adjust the path
int xoff = -300;
int yoff = screenH - 616 - 300;
float xScale = 1.5f;
float yScale = 1;

Path path = new Path();
path.moveTo(xScale * (565 + xoff), screenH + yoff);
path.cubicTo(
        xScale * (509 + xoff), yScale * (385 + yoff),
        xScale * (144 + xoff), yScale * (272 + yoff),
        xScale * (394 + xoff), yScale * (144 + yoff));
path.cubicTo(
        xScale * (477 + xoff), yScale * (99 + yoff),
        xScale * (596 + xoff), yScale * (91 + yoff),
        xScale * (697 + xoff), yScale * (128 + yoff));
path.cubicTo(
        xScale * (850 + xoff), yScale * (189 + yoff),
        xScale * (803 + xoff), yScale * (324 + yoff),
        xScale * (66 + xoff), yScale * (307 + yoff));

// set the path to pathView
pathView.setPath(path);
ViewAnimation animation = new ViewAnimation(pathView);
animation.addPageAnimaition(new WoWoPathAnimation(
        0, 0f, 1f,
        easeType,
        useSameEaseTypeBack));
wowo.addAnimation(animation);

缓动函数

缓动函数可以让以上动画效果看起来更加真实，你可以在构建动画的时候指定缓动函数类型。
Ease
当然你也可以不使用缓动函数，你可以在这里.找到所有的缓动函数类型。

RGB or HSV

所有的变色动画都有两种变色效果，RGB和HSV。 HSV是改变亮度等来实现变色，在自然界中看起来更加正常。 比如，从红色变为绿色，在HSV中是红->黄->绿。 在RGB中，是红->一种介于红和绿的颜色->绿。 但是通常情况下，用RGB要好点。 因为HSV看起来有点奇怪。 你可以再背景变色动画的gif中看到这两种变色的差异。

版本

1.0.1

第一个版本，11种动画。

Todo

  1. 增加更多动画。
  2. 智能生成路径。

License

Copyright 2016 Nightonke

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
世界不同于想象
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html特效，超炫酷！！！
05-01
html特效，超炫酷！！！100%真实推荐！ 可以直接将源码贴入自己的项目中，超实用，超方便！！！ 效果炫酷又漂亮，非同一般，适用于多个方面、领域！ 特别建议下载收藏！！！ 重中之重！！！
模仿黑客代码雨，超炫酷！
02-06
模仿黑客代码雨，超炫酷！ 适用于所有人！！！还在等什么，快来试试！ 发给朋友，TA肯定会惊掉下巴！！！
android动画的第三方框架,Android ViewPager动画第三方库（MagicViewPager）
weixin_31560545的博客
05-25 263
先看效果图：Rotate Y Rotate Down Rotate Up Alpha ScaleIn ScaleIn + Alpha + Rotate Down 使用###(1)引入compile `com.zhy:magic-viewpager:1.0.1`###(2)示例布局文件android:layout_width="match_parent"android:layout_height="...
ViewPager使用及加入动画
catface
02-29 893
一、ViewPager的基本使用 public class MainActivity extends AppCompatActivity { private ViewPager vp; private int[] imgs = {R.mipmap.welcome1, R.mipmap.welcome2, R.mipmap.welcome3, R.mipmap.welcome...
【Android studio】ViewPager和动画Animation
m0_56047445的博客
11-04 3155
①点击监听事件 ②意图intent ③引导页Viewpager ④动画Animation
ViewPager的切换动画
weixin_42643321的博客
03-23 694
ViewPager切换动画
ViewPager动画详解
light_sky的专栏
01-12 4897
前言 前两天看到鲍永章分享的Great animations with PageTransformer以及农民伯伯分享的Create ViewPager transitions 文章，都是通过ViewPager来实现酷炫的动画，而现在的App中ViewPager的动画使用也非常的广泛。正好最近一直研究动画，那么就趁热打铁，分析一下相关的开源库吧。本篇文章介绍的ViewPager动画，
Discuz! 炫酷时代模板
08-23
特殊动画炫酷！
12-25
这是一个特殊的动画效果的demo，有很多种动画特效，特别炫酷
炫酷代码雨，超级炫酷哦！！！
最新发布
04-26
超超超超超超超超超超超炫酷的代码雨！！！原创，开源，cpp文件，需要安装dev-c++，进入之后运行就可以了。
Android-ViewPagerAnimator一个轻量级强大的AndroidViewPager动画库
08-13
ViewPagerAnimator一个轻量级强大的Android ViewPager动画库
Android ViewPager切换的七种动画
01-05
Android ViewPager切换的七种动画，分别是：深入浅出，立方体，旋转，左右折叠，右上角进入，右下角进入和淡入淡出。
Android代码-WoWo可以优化你的App介绍引导页面，制作你的App简历。WoWo将动画和viewpager结合起来。
08-06
WoWoViewPager WoWoViewPager combines ViewPager and Animations to provide a simple way to create applications' guide pages. When users are dragging WoWoViewPager, they become the director of the applications. The above gifs show how WoWoViewPager looks like, it supports some simple animations like translation, scale, alpha, background color animations, and moreover, some complicate animations like gif-playing, svg-drawing and path-drawing animations with corresponding custom views. Note He
ViewPager五种动画效果
07-30
Google 提供的五种ViewPager动画
Viewpager切换的各种动画
05-13
实现了viewpager多种切换的动画。。满足你viewpager的各种动画切换需要
ViewPager 16种切换动画，早晚能用到
热门推荐
AndroidMsky的博客
12-10 1万+
相信很多同学都用过Viewpager但是，Viewpager提供的动画不能应对我们所有的需求，今天就给大家带来16+的动画效果，你可以用，更可以自定义
Android动画全篇系列（十二）——ViewPager滑动动画
catzifeng的博客
02-23 1459
文章目录一、前言二、实现1、参数的介绍2、实现三、ViewPager2四、小结 一、前言 ViewPager的作用很多，一般会结合Fragment来构成能左右滑动的视图结构。ViewPager还能够撸成一个Banner轮播图，只需要自定义一个PageAdapter即可。 当我们将ViewPager与Fragment相结合，我们不需要太多花里胡哨的滑动效果，简单的左右滑动就能够满足我们的要求。 而V...
『Android基础入门』ViewPager实现引导动画的效果
一个专注于客户端开发的技术er，不定期更新Android，Flutter，HormonyOS等方向的使用心得和感悟
10-03 1061
adapter与viewpager的关系 adapter是将数据渲染到视图的桥梁；1.继承自PagerAdapter抽象类2.重写抽象类中的方法getCount()和isViewFromObject()3.ctrl+o重写 生成:instantiateItem() 销毁:destroyItem()4.用一个imageViewList数组来存储图片数据,并创建构造函数初始化5.getCount()方法返回图片的数量。
ViewPager动画
06-21
ViewPager翻转动画，启动页面动画，视觉动画，3D翻转，缩放，卡牌效果
帮我写一个超炫酷的烟花代码html动画，主题是情人节，女朋友姓名叫方梦婕，烟花中带有名字，展示代码并生成html文件，最好能播放一下预览效果，一定要炫酷！！！
02-14
方梦婕的情人节烟花 <body> 方梦婕的情人节烟花</h1> <canvas id="fireworks" width="400" height="400"></canvas> var c = document.getElementById("fireworks"); var ctx = c.getContext("2d");...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值