9.视差特效、回弹动画、overScrollBy

视差特效 
* 应用场景: 微信朋友圈, QQ空间, 微博个人展示
* 功能实现:

> 1. 之前重写onTouch, 如今重写overScrollBy

> 2. 松手之后执行动画, 类型估值器

activity_main

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context=".MainActivity" >
  6. <com.itheima.parallaxdemo.ui.MyListView
  7. android:id="@+id/lv"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent" />
  10. </RelativeLayout>

view_header

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent"
  4. android:orientation="vertical" >
  5. <ImageView
  6. android:id="@+id/iv"
  7. android:layout_width="match_parent"
  8. android:layout_height="160dp"
  9. android:scaleType="centerCrop"
  10. android:src="@drawable/parallax_img" />
  11. </LinearLayout>

MyListView

  1. /**
  2. * 视差特效ListView
  3. * overScrollBy
  4. * @author poplar
  5. *
  6. */
  7. public class MyListView extends ListView {
  8. private static final String TAG = "TAG";
  9. private int mOriginalHeight;
  10. private int drawableHeight;
  11. private ImageView mImage;
  12. public MyListView(Context context, AttributeSet attrs, int defStyle) {
  13. super(context, attrs, defStyle);
  14. }
  15. public MyListView(Context context, AttributeSet attrs) {
  16. super(context, attrs);
  17. }
  18. public MyListView(Context context) {
  19. super(context);
  20. }
  21. /**
  22. * 设置ImageView图片, 拿到引用
  23. * @param mImage
  24. */
  25. public void setParallaxImage(ImageView mImage) {
  26. this.mImage = mImage;
  27. mOriginalHeight = mImage.getHeight(); // 160
  28. drawableHeight = mImage.getDrawable().getIntrinsicHeight(); // 488,图片的高,而不是显示的高
  29. Log.d(TAG, "height: " + mOriginalHeight + " drawableHeight: " + drawableHeight);
  30. }
  31. @Override
  32. protected boolean overScrollBy(int deltaX, int deltaY,
  33. int scrollX, int scrollY, int scrollRangeX, int scrollRangeY,
  34. int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
  35. // deltaY : 竖直方向的瞬时偏移量 / 变化量 dx 顶部到头下拉为-, 底部到头上拉为+
  36. // scrollY : 竖直方向的偏移量 / 变化量
  37. // scrollRangeY : 竖直方向滑动的范围
  38. // maxOverScrollY : 竖直方向最大滑动范围
  39. // isTouchEvent : 是否是手指触摸滑动, true为手指, false为惯性
  40. Log.d(TAG, "deltaY: " +deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
  41. + " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent);
  42. // 手指拉动 并且 是下拉
  43. if(isTouchEvent && deltaY < 0){
  44. // 把拉动的瞬时变化量的绝对值交给Header, 就可以实现放大效果
  45. if(mImage.getHeight() <= drawableHeight){
  46. int newHeight = (int) (mImage.getHeight() + Math.abs(deltaY / 3.0f));
  47. // 高度不超出图片最大高度时,才让其生效
  48. mImage.getLayoutParams().height = newHeight;
  49. mImage.requestLayout();
  50. }
  51. }
  52. return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,
  53. scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
  54. }
  55. @Override
  56. public boolean onTouchEvent(MotionEvent ev) {
  57. switch (ev.getAction()) {
  58. case MotionEvent.ACTION_UP:
  59. // 执行回弹动画, 方式一: 属性动画\值动画
  60. // 从当前高度mImage.getHeight(), 执行动画到原始高度mOriginalHeight
  61. final int startHeight = mImage.getHeight();
  62. final int endHeight = mOriginalHeight;
  63. // valueAnimator(startHeight, endHeight);
  64. // 执行回弹动画, 方式二: 自定义Animation
  65. ResetAnimation animation = new ResetAnimation(mImage, startHeight, endHeight);
  66. startAnimation(animation);
  67. break;
  68. }
  69. return super.onTouchEvent(ev);
  70. }
  71. private void valueAnimator(final int startHeight, final int endHeight) {
  72. ValueAnimator mValueAnim = ValueAnimator.ofInt(1);//不起作用,写几都行
  73. mValueAnim.addUpdateListener(new AnimatorUpdateListener() {
  74. @Override
  75. public void onAnimationUpdate(ValueAnimator mAnim) {
  76. float fraction = mAnim.getAnimatedFraction();
  77. // percent 0.0 -> 1.0
  78. Log.d(TAG, "fraction: " +fraction);
  79. Integer newHeight = evaluate(fraction, startHeight, endHeight);//固值器
  80. mImage.getLayoutParams().height = newHeight;//设置imageview高度
  81. mImage.requestLayout();
  82. }
  83. });
  84. mValueAnim.setInterpolator(new OvershootInterpolator());
  85. mValueAnim.setDuration(500);
  86. mValueAnim.start();
  87. }
  88. public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
  89. int startInt = startValue;
  90. return (int)(startInt + fraction * (endValue - startInt));
  91. }
  92. }

ResetAnimation

  1. public class ResetAnimation extends Animation {
  2. private final ImageView mImage;
  3. private final int startHeight;
  4. private final int endHeight;
  5. public ResetAnimation(ImageView mImage, int startHeight, int endHeight) {
  6. this.mImage = mImage;
  7. this.startHeight = startHeight;
  8. this.endHeight = endHeight;
  9. setInterpolator(new OvershootInterpolator());
  10. //设置动画执行时长
  11. setDuration(500);
  12. }
  13. @Override
  14. protected void applyTransformation(float interpolatedTime, Transformation t) {
  15. // interpolatedTime 0.0f -> 1.0f
  16. Integer newHeight = evaluate(interpolatedTime, startHeight, endHeight);
  17. mImage.getLayoutParams().height = newHeight;//设置imageview高
  18. mImage.requestLayout();
  19. super.applyTransformation(interpolatedTime, t);
  20. }
  21. /**
  22. * 类型估值器
  23. * @param fraction
  24. * @param startValue
  25. * @param endValue
  26. * @return
  27. */
  28. public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
  29. int startInt = startValue;
  30. return (int)(startInt + fraction * (endValue - startInt));
  31. }
  32. }

MainActivity

  1. public class MainActivity extends Activity {
  2. @Override
  3. protected void onCreate(Bundle savedInstanceState) {
  4. super.onCreate(savedInstanceState);
  5. setContentView(R.layout.activity_main);
  6. final MyListView mListView = (MyListView) findViewById(R.id.lv);
  7. mListView.setOverScrollMode(View.OVER_SCROLL_NEVER);
  8. // 加Header
  9. final View mHeaderView = View.inflate(MainActivity.this, R.layout.view_header, null);
  10. final ImageView mImage = (ImageView) mHeaderView.findViewById(R.id.iv);
  11. mListView.addHeaderView(mHeaderView);
  12. mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
  13. @Override
  14. public void onGlobalLayout() {
  15. // 当布局填充结束之后, 此方法会被调用
  16. mListView.setParallaxImage(mImage);
  17. mHeaderView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
  18. }
  19. });
  20. // 填充数据
  21. mListView.setAdapter(new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, Cheeses.NAMES));
  22. }
  23. }

来自为知笔记(Wiz)

时间: 2024-10-11 16:42:46

9.视差特效、回弹动画、overScrollBy的相关文章

测开之路一百零一:jquery文字特效、动画、方法链

文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-3.4.1.min.js"></script>--&g

第五篇 jQuery特效与动画

5.1 show()与hide()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-

JQuery特效与动画总结

几种特效 一.显示与隐藏show.hide js写法: docment.getElementById("p1").style.display="block"; document.getElementById("p1").style.display="none"; JQuery显示与隐藏的方法: $("#p1").css("dislay":"block");  转化成模

利用tween,使用原生js实现模块回弹动画效果

最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容ie7,只能说是无缘了 后来,利用jq的animate也能够实现,但是不知道怎么回事 当滚回去时有延迟,好几秒后才能隐藏不见. 最终使用tween能够完美实现,只能说原生js的强大了. tween其实是一个函数库,里面都是些公式,比如说运动轨迹的算数公式. 实现效果:其实就是一个小方块弹啊弹. 首先给

css:关于transform特效与动画

transform: w3c none 定义不进行转换. 测试 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵. 测试 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵.   translate(x,y) 定义 2D 转换. 测试 translate3d(x,y,z) 定义 3D 转换.   translateX(x) 定义转换,只是用 X 轴的值. 测试 translateY(y)

超酷创意分段式SVG文字动画特效

这是一款基于segment.js制作的非常有创意的分段式SVG文字动画特效.这个文字动画特效通过动画SVG的描边路径来制作各种文字的动画效果,效果非常的赞. 这个SVG文字动画特效的第一个DEMO中的最后几个例子使用了mo.js插件,一款由Oleg Solomka编写的用于制作网页图形动画的JavaScript库插件.通过mo.js,可以制作出效果更为震撼的文字动画效果. 在线预览   源码下载 特效中使用的字体是exquisite lowercase font,一套极富创意的WEB字体. 使用

css3实现的4种动画特效按钮

今天要给大家介绍的是css3按钮,里面包含四种特效的动画,如下图: 在线预览    下载源码 实现html代码: <div align="center" class="fond"> <br /> <div class="bouton_1"> <a href="#123"> <img src="caddie.png" /> <span clas

超级绚丽,20款前端动画特效,轰炸你的眼睛

前言 HTML5一个相当出色的web技术,它不仅可以让你更加方便地操纵页面元素,而且可以通过canvas实现更多的动画特效,引进HTML5标准后,CSS3也就可以发挥更大的作用.本文主要介绍了一些基于HTML5 Canvas的动画特效,分享给大家,希望大家喜欢.其实做为一个前端开发者,有一个学习的氛围跟一个交流圈子特别重要,这是一个我的前端交流群:330336289,邀请编号:寂静.不管你是小白还是大牛欢迎入驻,大家一起交流学习,继续学习,特效源码也会在群里分享 1.HTML5 Canvas画板

android之超级简单的下拉回弹--仿QQ个人主页

先看效果: 效果不错吧! 进入主题之前,先了解ImageView的scaleType的center_crop,网络上说的已经很清楚了 : 以下抄自网络: android:scaleType="centerCrop" 以填满整个ImageView为目的,将原图的中心对准ImageView的中心,等比例放大原图,直到填满ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理. 均衡的缩放图像(保持图像原始比例),使图片的两个坐标(宽.