首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何创建Android ViewPager滑动超调/弹跳动画?

要创建Android ViewPager滑动超调/弹跳动画,可以按照以下步骤进行:

  1. 首先,创建一个自定义的ViewPager类,继承自ViewPager,并重写其onTouchEvent方法。
  2. 在onTouchEvent方法中,获取当前手指触摸的位置,并计算出ViewPager的滑动距离。
  3. 根据滑动距离,可以使用插值器(Interpolator)来实现滑动超调/弹跳效果。Android提供了一些内置的插值器,如AccelerateInterpolator、DecelerateInterpolator等,也可以自定义插值器。
  4. 在滑动过程中,根据计算得到的滑动距离和插值器,可以设置ViewPager的动画效果,如缩放、透明度变化等。
  5. 最后,将自定义的ViewPager应用到你的Android项目中,替换原有的ViewPager。

以下是一个示例代码,演示如何创建Android ViewPager滑动超调/弹跳动画:

代码语言:txt
复制
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.animation.AccelerateInterpolator;

public class BounceViewPager extends ViewPager {
    private float mLastMotionX;
    private float mLastMotionY;

    public BounceViewPager(Context context) {
        super(context);
    }

    public BounceViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        float x = ev.getX();
        float y = ev.getY();

        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastMotionX = x;
                mLastMotionY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                float deltaX = x - mLastMotionX;
                float deltaY = y - mLastMotionY;

                // 根据滑动距离设置动画效果
                setAnimation(deltaX);

                mLastMotionX = x;
                mLastMotionY = y;
                break;
            case MotionEvent.ACTION_UP:
                // 恢复原始状态
                resetAnimation();
                break;
        }

        return super.onTouchEvent(ev);
    }

    private void setAnimation(float deltaX) {
        // 根据滑动距离设置动画效果,这里使用了AccelerateInterpolator插值器
        float scale = 1 - Math.abs(deltaX) / getWidth();
        setScaleX(scale);
        setScaleY(scale);
        setAlpha(scale);
        setTranslationX(deltaX / 2);
        setInterpolator(new AccelerateInterpolator());
    }

    private void resetAnimation() {
        // 恢复原始状态
        setScaleX(1);
        setScaleY(1);
        setAlpha(1);
        setTranslationX(0);
    }
}

在使用这个自定义的BounceViewPager时,只需要将原来的ViewPager替换为BounceViewPager即可。

请注意,以上代码仅为示例,实际使用时可能需要根据具体需求进行适当的修改和调整。

推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),该产品可以帮助开发者分析和监控移动应用的用户行为和性能,提供丰富的数据分析和可视化报表,帮助优化用户体验和提升应用质量。详细信息请参考腾讯云移动应用分析(MTA)产品介绍:https://cloud.tencent.com/product/mta

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

怎样在Android上实现一个iOS多任务列表效果

| 导语 苹果在iOS 7的时候就引入了卡片列表进行多任务切换,往上滑动就可以移除掉某个app,到了最新的iOS 13,其多任务列表也是在这种卡片列表样式的基础上进行了优化;Android阵营的华为,小米等厂商也是陆续地引入这种多任务列表样式...3.1. item上下滑动动画 这一步实现原理比较简单,就是在ViewPager的onTouchEvent里对move事件做上下滑动检测,满足条件时对当前的item view做上下移动即可,当up事件到达时...,再根据速度和偏移条件,判断是否真要滑动移除,要的话再触发相应的动画。...总结 最后总结一下,本篇介绍了如何基于ViewPager,实现了一个类似iOS多任务列表效果,主要目的在于验证方案的可行性,即如何在已有控件的基础上快速复用来实现我们要的效果,虽然效果实现出来了,但对比...iOS的效果,仍然有不少地方需要优化,比如提高动画的细腻程度和流畅度(这方面Android和iOS相比真有差距);另外,细心的同学可能会发现,iOS的多任务列表是从右边开始,而我们的实现效果(或者说ViewPager

3.6K60

2014-11-3Android学习------关于ViewPager的实现步骤--------GIF动画实现

控件,就是实现翻页的效果,类似于我们现在的手机打开可以左右滑动,或者有些APP菜单的滑动效果 ,今天要学习的就是这样一个控件,标题是实现ViewPager的步骤,我觉得还是先直接给出步骤来,然后慢慢解释...1.要确保有依赖包存在:android-support-v4.jar 一般在 创建项目的时候就会自动出现在libs文件下面,如果没有 请到网上下载最新版本的放在libs文件下面,然后配置下 2...listener The callback to add Throws IllegalStateException If isAlive() returns false 5.处理翻页效果的事务处理(主要的就是如何实现向右滑动的效果...break; case 0: break; } B.页面在滑动的时候调用的回函数 public void onPageScrolled(int arg0...如果你没有业务需要的话就不用写 C.页面跳转之后调用的方法(也即是比较常用需要处理的回函数,当我们向右滑动的完毕之后需要调用的方法) public void onPageSelected(int

28120

Carson带你学Android:ViewPage最详细的使用教程

定义 ViewPagerAndroid扩展包v4包中的类 android.support.v4.view.ViewPager 类似于LinearLayout,ViewPager类直接继承了ViewGroup...在XML布局中加入android.support.v4.view.ViewPager: <android.support.v4.view.ViewPager android:id...设置切换、滑动动画 利用Viewpage自带的方法setPageTransformer()可用于设置切换动画 步骤1:先定义动画效果类(此处采用Google官方给出的动画类) DepthPageTransformer.java...滑动接口说明 关于ViewPage的滑动接口**OnPageChangeListener()**如何使用,请看我写的另外一篇文章:Android开发:ViewPage滑动接口最详细解析 5....Android:自定义View Carson带你学Android:异步-多线程 Carson带你学Android:性能优化 Carson带你学Android动画

57410

android 布局 使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题

使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题。...我的问题原型:      这个问题,我相信遇到的人会比较少,我是在 一个 viewPager 中,其中 一个 fragment 中实现了长按滑动图片的功能,而发现它们两者的 onTouchEvent事件冲突...,具体代码是下面,这种方法,我尝试 后发现,只能在第一次加载 viewPager的 页面达到 阻断的效果,我这里详细说下,在MainActivity 页面里面,我们初始化了 viewPager,然后我们要在...; 7 import android.support.v4.view.ViewPager; 8 import android.util.AttributeSet; 9 import android.util.Log...; 10 import android.view.MotionEvent; 11 12 13 public class myViewPager extends ViewPager { 14 15

1.4K100

2014-11-3Android学习------利用ViewFlipper实现滑动翻页的效果--------GIF动画实现

LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)); } 当我们new GestureDetector(this)的时候,它肯定自动的告诉你需要去继承一个接口 也就是处理滑动事件的回函数...MotionEvent e) { // TODO Auto-generated method stub return false; } // OnGestureListener中的onFling方法就是滑动事件的回函数...// 从左向右滑动 if (arg0.getX() - arg1.getX() > 120) { // 添加动画 this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation...arg0, MotionEvent arg1, float velocityX,float velocityY) 是我们需要的,它就是 OnGestureListener中的onFling方法就是滑动事件的回函数...// 从左向右滑动 if (arg0.getX() - arg1.getX() > 120) { // 添加动画 this.viewFlipper.setInAnimation(AnimationUtils.loadAnimation

65320

ViewPager轻松完成TabHost效果

相信很多同学都使用过今日头条APP吧,一打开主界面就可以看到顶部有很多Tab,然后通过左右滑动来切换,就可以通过ViewPager来完成。...接下来依然通过一个案例来学习如何自定义ViewPager的Tab标签。...继续使用WidgetSample工程的advancedviewsample模块,在src/main/res/layout/目录下创建viewpager_custom_layout.xml文件,在其中填充如下代码片段...最后在最底下是一个ViewPager,其中android:flipInterval属性设置了动画的时间间隔,android:persistentDrawingCache属性指控件的绘制缓存策略,一共有4...然后同样设置了页面监听器,主要根据滑动到的页面把游标滑动找指定位置。关于动画的这一块代码,可能有很多新人不太懂,不要太介意这个了,后续会专门进行学习,这里只需要知道可以这样使用就行。

1.5K70

Android 自定义 ViewPager 打造千变万化的图片切换效果

时间长了,ViewPager的切换效果觉得枯燥,形成了审美疲劳~~我们需要改变,今天教大家如何改变ViewPager切换时的效果,实现个性化的图片切换~~ 看一下这样效果的图片切换: 是不是比传统的效果个性很多...我们在来看一下,如果或者了当前View和目的View,对于动画我们需要缓慢的变化,最好是根据用户的手势滑动。比如上述效果,用户滑动时,目的图片根据用户滑动距离缓缓出现和慢慢变大。...-1)获得滑动时,左右的两个View;乍一看,还真觉得不错~~~在代码写出来,再乍效果也出不来~~错误原因:我们忽略一个特别大的东西,ViewPager的机制,滑动时动态加载和删除View,ViewPager...,就改变了~~难怪~整个滑动过程并不是固定的~~唉,心都碎了~ 3、【错误】position在整个滑动的过程中是不变化的,而且ViewPager会保存2个或3个View;那么我考虑,如果是第一页、或者最后一页那么我取...; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.util.Log

45410

Android自定义引导玩转ViewPager的方法详解

ViewPager简介: ViewPagerandroid.support.v4.view.ViewPager)是android扩展包v4包中的类,这个类可以让用户左右切换当前的view,实现滑动切换的效果...ViewPager基础使用 具体步骤: 1.在布局文件里加入 <android.support.v4.view.ViewPager android:id="@+id/in_viewpager...和自定义的PagerAdapter关联起来 mIn_vp.setAdapter(new ViewPagerAdatper(mViewList)); 通过简单使用ViewPager,得到的展示效果,仅仅支持左右滑动...需要注意的是:在onCreate()中直接获得小白点的左边距 getLeft()结果为0,这是因为View组件布局要在onResume回后完成。...ViewPager进阶使用——自定义炫酷动画 ViewPager自带了一个setPageTransformer用于设置切换动画~ setPageTransformer (boolean reverseDrawingOrder

64010

自定义 behavior - 完美仿 QQ 浏览器首页,美团商家详情页

今天,对该 behavior 进行升级,相对于两年前的 behavior,增加了以下功能 级联滑动过程中增加监听回,方便外部根据滑动距离,进行相应的动画,展现炫酷的 UI,通过 setPagerStateListener...open 状态指 Tab+ViewPager 还没有滑动到顶部的时候,header 还 没有被完全移除屏幕的时候 close 状态指 Tab+ViewPager 滑动到顶部的时候,Header 被移除屏幕的时候...第二个方法,当 header 滑动距离变化的时候,会回 onScrollChange 方法。...,你可以在 onScrollChange 方法中,根据滑动的距离,各个不同的 View 做相应的动画。...,可以看我以前的一篇博客:ViewPager,ScrollView 嵌套ViewPager滑动冲突解决 如何判断 header 是 fling 动作 我们这里通过手势处理器 GestureDetector

1.3K40

Android开发3年,九月份面试12家大厂跳槽成功,我有一些面试经验想分享给你们

这里推荐一下极客时间上覃的五遍刷题法: 五遍刷题法 1.第一遍,直接看解法 多解法,比较解法优劣,默写好的解法 2.第二遍,打开leetcode,直接开始写 多种解法比较,优 3.第三遍,过一天之后...中嵌套ViewPager怎么处理滑动冲突 android源码中有哪些设计模式 说说binder机制的原理 腾讯二面 为什么考虑换一份工作?...native如何对h5进行鉴权,让某些页面可以,某些页面不能 有看过哪些框架的源码吗? viewModel是怎么实现双向数据绑定的? viewModel怎么实现自动处理生命周期?...端和IOS端一个接口,一个通了一个没通,你会如何解决 如果android端和IOS端一个接口,一个比较慢,一个比较快,有什么思路 ARouter的原理是什么?...说说事件分发机制,怎么写一个不能滑动ViewPager 说说你对类加载机制的了解?

1.5K10

Android使用自定义PageTransformer实现个性的ViewPager动画切换效果

1、概述 之前写过一篇博文:Android 自定义 ViewPager 打造千变万化的图片切换效果。...有兄弟提出,ViewPager自带了一个setPageTransformer用于设置切换动画~ 本篇博文,将: 1、介绍如何使用setPageTransformer设置切换动画; 2、自定义PageTransformer..." android:layout_height="match_parent" <android.support.v4.view.ViewPager android:id="@+id...a PageTransformer prior to Android 3.0 (API 11) will have no effect 在3.0之前的版本设置此方法是没有效果的,那么下面我们就看如何让其兼容...可以看到,我们的切换动画完美的运行在2.3.3的机器上~~so happy ~~没有ViewPager源码的童鞋不要紧,我会在文末的源码下载中加入ViewPager源码,让你可以尽情去测试~~ 当然了,

1.6K10
领券