9.视差特效、回弹动画、overScrollBy
视差特效
* 应用场景: 微信朋友圈, QQ空间, 微博个人展示,向下拉出,松开回弹
* 功能实现:
> 1. 重写overScrollBy
> 2. 松手之后执行动画, 类型估值器

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<com.itheima.parallaxdemo.ui.MyListView
android:id="@+id/lv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scaleType="centerCrop"
android:src="@drawable/parallax_img" />
</LinearLayout>
/**
* 视差特效ListView
* overScrollBy
* @author poplar
*
*/
public class MyListView extends ListView {
private static final String TAG = "TAG";
private int mOriginalHeight;
private int drawableHeight;
private ImageView mImage;
public MyListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
public MyListView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyListView(Context context) {
super(context);
} /**
* 设置ImageView图片, 拿到引用
* @param mImage
*/
public void setParallaxImage(ImageView mImage) {
this.mImage = mImage;
mOriginalHeight = mImage.getHeight(); // 160
drawableHeight = mImage.getDrawable().getIntrinsicHeight(); // 488,图片的高,而不是显示的高 Log.d(TAG, "height: " + mOriginalHeight + " drawableHeight: " + drawableHeight);
} @Override
protected boolean overScrollBy(int deltaX, int deltaY,
int scrollX, int scrollY, int scrollRangeX, int scrollRangeY,
int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
// deltaY : 竖直方向的瞬时偏移量 / 变化量 dx 顶部到头下拉为-, 底部到头上拉为+
// scrollY : 竖直方向的偏移量 / 变化量
// scrollRangeY : 竖直方向滑动的范围
// maxOverScrollY : 竖直方向最大滑动范围
// isTouchEvent : 是否是手指触摸滑动, true为手指, false为惯性 Log.d(TAG, "deltaY: " +deltaY + " scrollY: " + scrollY + " scrollRangeY: " + scrollRangeY
+ " maxOverScrollY: " + maxOverScrollY + " isTouchEvent: " + isTouchEvent); // 手指拉动 并且 是下拉
if(isTouchEvent && deltaY < 0){
// 把拉动的瞬时变化量的绝对值交给Header, 就可以实现放大效果
if(mImage.getHeight() <= drawableHeight){
int newHeight = (int) (mImage.getHeight() + Math.abs(deltaY / 3.0f)); // 高度不超出图片最大高度时,才让其生效
mImage.getLayoutParams().height = newHeight;
mImage.requestLayout();
}
} return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX,
scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
} @Override
public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) {
case MotionEvent.ACTION_UP:
// 执行回弹动画, 方式一: 属性动画\值动画
// 从当前高度mImage.getHeight(), 执行动画到原始高度mOriginalHeight
final int startHeight = mImage.getHeight();
final int endHeight = mOriginalHeight; // valueAnimator(startHeight, endHeight);
// 执行回弹动画, 方式二: 自定义Animation
ResetAnimation animation = new ResetAnimation(mImage, startHeight, endHeight);
startAnimation(animation); break;
}
return super.onTouchEvent(ev);
}
private void valueAnimator(final int startHeight, final int endHeight) {
ValueAnimator mValueAnim = ValueAnimator.ofInt(1);//不起作用,写几都行
mValueAnim.addUpdateListener(new AnimatorUpdateListener() { @Override
public void onAnimationUpdate(ValueAnimator mAnim) {
float fraction = mAnim.getAnimatedFraction();
// percent 0.0 -> 1.0
Log.d(TAG, "fraction: " +fraction);
Integer newHeight = evaluate(fraction, startHeight, endHeight);//固值器
mImage.getLayoutParams().height = newHeight;//设置imageview高度
mImage.requestLayout();
}
}); mValueAnim.setInterpolator(new OvershootInterpolator());
mValueAnim.setDuration(500);
mValueAnim.start();
} public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
int startInt = startValue;
return (int)(startInt + fraction * (endValue - startInt));
} }
public class ResetAnimation extends Animation {
private final ImageView mImage;
private final int startHeight;
private final int endHeight;
public ResetAnimation(ImageView mImage, int startHeight, int endHeight) {
this.mImage = mImage;
this.startHeight = startHeight;
this.endHeight = endHeight; setInterpolator(new OvershootInterpolator());
//设置动画执行时长
setDuration(500);
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
// interpolatedTime 0.0f -> 1.0f Integer newHeight = evaluate(interpolatedTime, startHeight, endHeight);
mImage.getLayoutParams().height = newHeight;//设置imageview高
mImage.requestLayout(); super.applyTransformation(interpolatedTime, t);
} /**
* 类型估值器
* @param fraction
* @param startValue
* @param endValue
* @return
*/
public Integer evaluate(float fraction, Integer startValue, Integer endValue) {
int startInt = startValue;
return (int)(startInt + fraction * (endValue - startInt));
} }MainActivity
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); final MyListView mListView = (MyListView) findViewById(R.id.lv);
mListView.setOverScrollMode(View.OVER_SCROLL_NEVER);
// 加Header
final View mHeaderView = View.inflate(MainActivity.this, R.layout.view_header, null);
final ImageView mImage = (ImageView) mHeaderView.findViewById(R.id.iv);
mListView.addHeaderView(mHeaderView); mHeaderView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { @Override
public void onGlobalLayout() {
// 当布局填充结束之后, 此方法会被调用
mListView.setParallaxImage(mImage); mHeaderView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
}); // 填充数据
mListView.setAdapter(new ArrayAdapter<String>(MainActivity.this, android.R.layout.simple_list_item_1, Cheeses.NAMES)); }
}
9.视差特效、回弹动画、overScrollBy的更多相关文章
- QQ视差特效和ListView侧滑删除
如图所示是效果图,当向下拉时,图片会被拉出来,松手后恢复.和ListView的侧滑删除 1.视差特效 首先图片是通过addHeaderView加上去的,所以在设置Adapter前先设置一个View ...
- WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果. /// -Ball to Ball Collision - Detection and Handling /// http:// ...
- iOS Swift 实现图片点击缩放回弹动画
效果就是下面这个样子: 思路借鉴的是MZTimerLabel,有想过做一个自定义的ImageView,但那样的话之前view用必须要改代码,索性就按照MZTimerLabel这个方式实现,简单易用,从 ...
- 测开之路一百零一:jquery文字特效、动画、方法链
文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...
- 利用tween,使用原生js实现模块回弹动画效果
最近有一个需求,就是当屏幕往下一定像素时,下方会有一个隐藏的模块马上显现出来,向上运动后带有回弹效果.然后屏幕滚回去时这个模块能够原路返回 其实这个效果css3就可以很轻松实现,但是公司要求最低兼容i ...
- 第五篇 jQuery特效与动画
5.1 show()与hide()方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
- [一位菜鸟的COCOS-2D编程之路]COCOS2D中得动作,特效和动画
一,CCActionManager 管理所有节点动作的对象 来看看打飞机里面的一个onEnter 方法 - (void)onEnter { [super onEnter]; //一定要注意添加此方法, ...
- css3实现的4种动画特效按钮
今天要给大家介绍的是css3按钮,里面包含四种特效的动画,如下图: 在线预览 下载源码 实现html代码: <div align="center" class=&quo ...
- python 制作影视动画、电影特效工具
一直觉得电影特效,动画制作这些都很什么,在google上搜索了下python开发电影特效的内容,发现了几个不错的软件,都支持python脚本开发. Houdini Houdini (电影特效魔术师) ...
随机推荐
- c++常用小算法
这篇文章列出了一些简单常用的C++容器算法,C++标准库中事实上提供了很多的算法并且有详细的介绍.如果需要详细的了解这些算法可以 参考C++在线参考手册 algrithm . 1 排序 在 #incl ...
- anaconda安装qt错误
windows下miniconda2安装python3下的qt包报错 conda install qt ERROR conda.core.link:_execute_actions(330): An ...
- Spring Cloud Eureka的集群配置(六)
1.再次创建2个Eureka工程 工程名:microservicecloud-eureka-7002 工程名:microservicecloud-eureka-7003 2.pom.xml文件 < ...
- 每天写两个的java常见面试题—final 和static 的用法
第一次写随笔,可能写的比较乱,更多的是作为自己记忆一些知识的方式.所有记录的东西都是自己的一些理解,很多语言可能还是从其他大牛的博客里面搬过来的. 一.static的作用: static的的作用从三个 ...
- 一些Debug时没整理的内容
一.UShapeComponent组件的默认CollisionProfile为:OverlapAllDynamic.这会影响到由此派生的许多组件. 二.TwinStickShooter中绑定键盘的方式 ...
- Web开发的小知识点
ServletConfig:用于读取配置文件信息 ServletContext:这是一个容器,代表一个web应用程序,多个Servlet可以通过这个容器共享数据信息(注意:这样的数据共享有线程安全问题 ...
- AspNet Core 认证
一 Cookie认证 1 services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCooki ...
- mac mysql5.7.17修改root初始密码(知道初始密码)
最近在mac上装个mysql可以说是麻烦死了,在这里就说说修改初始密码吧! 刚开始的时候不知道怎么修改,于是上网百度,网上几乎都是说要先执行命令mysqld_safe --skip-grant-tab ...
- PHP中this,self,parent的区别
{一}PHP中this,self,parent的区别之一this篇 面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行P ...
- pycharm clion phpstorn全家桶激活码(可以用到2019年4月)
SXXI7H41YN-eyJsaWNlbnNlSWQiOiJTWFhJN0g0MVlOIiwibGljZW5zZWVOYW1lIjoicGF5bmUgd2FuZyIsImFzc2lnbmVlTmFtZ ...