SeniorUI_高级UI汇总目录

一效果图

二视频送礼物，冒泡泡效果

1 需求

点击显示礼物图片
“礼物”由无到有，由小到大，由透明到变实
“礼物”从底部到顶部逐渐平滑“上浮”，然后消失

2 分析

自定义ViewGroup显示，“礼物”是一个ImageView，通过addView显示
动画实现从小到大，从透明变实
平滑上浮的轨迹用贝赛尔算法控制ImageView的Point
贝赛尔曲线的起始和终止点在底部居中和顶部任意位置，第二和第三个锚点在屏幕中，通常第三个的位置高于第二个

3 主要代码

贝赛尔算法：

public class BezierEvaluator implements TypeEvaluator<PointF> {private PointF pointF1;private PointF pointF2;public BezierEvaluator(PointF pointF1, PointF pointF2) {this.pointF1 = pointF1;this.pointF2 = pointF2;}@Overridepublic PointF evaluate(float t, PointF point0, PointF point3) {PointF point = new PointF();point.x = point0.x * (1 - t) * (1 - t) * (1 - t)+ 3 * pointF1.x * t * (1 - t) * (1 - t)+ 3 * pointF2.x * t * t * (1 - t)+ point3.x * t * t * t;point.y = point0.y * (1 - t) * (1 - t) * (1 - t)+ 3 * pointF1.y * t * (1 - t) * (1 - t)+ 3 * pointF2.y * t * t * (1 - t)+ point3.y * t * t * t;return point;}
}

自定义的ViewGroup

public class LoveLayout extends RelativeLayout {private Interpolator line = new LinearInterpolator();//线性private Interpolator acc = new AccelerateInterpolator();//加速private Interpolator dce = new DecelerateInterpolator();//减速private Interpolator accdec = new AccelerateDecelerateInterpolator();//先加速后减速private Interpolator[] interpolators;Drawable[] drawables = new Drawable[3];private Random random = new Random();private int dHeight;private int dWidth;private LayoutParams params;private int mWidth;private int mHeight;public LoveLayout(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}public LoveLayout(Context context) {super(context);init();}public LoveLayout(Context context, AttributeSet attrs) {super(context, attrs);init();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure(widthMeasureSpec, heightMeasureSpec);mWidth = getMeasuredWidth();mHeight = getMeasuredHeight();}private void init() {interpolators = new Interpolator[4];interpolators[0] = line;interpolators[1] = acc;interpolators[2] = dce;interpolators[3] = accdec;//准备图片集合drawables[0] = getResources().getDrawable(R.drawable.red);drawables[1] = getResources().getDrawable(R.drawable.yellow);drawables[2] = getResources().getDrawable(R.drawable.blue);//得到图片的原始高度dWidth = drawables[0].getIntrinsicWidth();dHeight = drawables[0].getIntrinsicHeight();params = new LayoutParams(dWidth, dHeight);//将iv添加到父容器底部、水平居中位置params.addRule(CENTER_HORIZONTAL);params.addRule(ALIGN_PARENT_BOTTOM);}public void addLoveIcon() {//添加心形，并开始执行动画final ImageView iv = new ImageView(getContext());iv.setImageDrawable(drawables[random.nextInt(3)]);//将iv添加到父容器底部、水平居中位置iv.setLayoutParams(params);addView(iv);//开始属性动画：平移、透明度渐变、缩放动画AnimatorSet set = getAnimator(iv);//监听动画执行完毕，将iv移除或者复用set.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationEnd(Animator animation) {super.onAnimationEnd(animation);removeView(iv);}});set.start();}// 得到一个iv的动画集合private AnimatorSet getAnimator(ImageView iv) {//平移、透明度渐变、缩放动画//1.alpha动画ObjectAnimator alpha = ObjectAnimator.ofFloat(iv, "alpha", 0.3f, 1f);//2.缩放动画ObjectAnimator scaleX = ObjectAnimator.ofFloat(iv, "scaleX", 0.3f, 1f);ObjectAnimator scaleY = ObjectAnimator.ofFloat(iv, "scaleY", 0.3f, 1f);//三个动画同时执行AnimatorSet enter = new AnimatorSet();enter.setDuration(600);enter.playTogether(alpha, scaleX, scaleY);
//      enter.setTarget(iv);//设置平移的曲线动画---贝塞尔曲线ValueAnimator bezierAnimator = getBezierValueAnimator(iv);AnimatorSet set = new AnimatorSet();//按序列执行set.playSequentially(enter, bezierAnimator);//加速因子，使用插值器set.setInterpolator(interpolators[random.nextInt(4)]);set.setTarget(iv);return set;}//得到一个贝塞尔曲线动画private ValueAnimator getBezierValueAnimator(final ImageView iv) {//根据贝塞尔公式确定四个点（起始点p0，拐点1p1，拐点2p2，终点p3）PointF pointF0 = new PointF((mWidth - dWidth) / 2, mHeight - dHeight);PointF pointF3 = new PointF(random.nextInt(mWidth), 0);PointF pointF1 = getPointF(1);PointF pointF2 = getPointF(2);//估值器Evaluator,来控制view的行驶路径(不断地修改point.x,point.y)BezierEvaluator evaluator = new BezierEvaluator(pointF1, pointF2);//属性动画不仅仅可以改变view的属性，还可以改变自定义的属性(比如Point)ValueAnimator animator = ValueAnimator.ofObject(evaluator, pointF0, pointF3);animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void onAnimationUpdate(ValueAnimator animation) {PointF pointF = (PointF) animation.getAnimatedValue();iv.setX(pointF.x);iv.setY(pointF.y);iv.setAlpha(1 - animation.getAnimatedFraction());//1~0 百分比}});animator.setDuration(4000);return animator;}private PointF getPointF(int i) {PointF pointF = new PointF();pointF.x = random.nextInt(mWidth);//为了好看，尽量保证point2.y>point1.yif (i == 1) {pointF.y = random.nextInt(mHeight / 2) + mHeight / 2;} else {pointF.y = random.nextInt(mHeight / 2);}return pointF;}
}

4 Demo

GiftActivity

三淘宝商品折叠效果

1 需求

页面分两部分，上面的商品图片和下面显示部分的详情
点击时，图片翻转缩小，详情部分上滑显示更多内容

2 分析

两个部分用两个ViewGroup
翻转缩小动画控制第一个ViewGroup显示图片
上滑动画控制显示第二个ViewGroup显示详情

3 主要代码

 public void startFirstAnim(View v){//显示first_view：1.透明度动画；2.缩放动画；3.翻转动画//透明度动画ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(first_view, "alpha", 1.0f, 0.7f);firstAlphaAnim.setDuration(300);//旋转动画1ObjectAnimator firstRotationXanim = ObjectAnimator.ofFloat(first_view, "rotationX", 0f,20f);firstRotationXanim.setDuration(300);//再旋转回来ObjectAnimator firstResumeRotationXanim = ObjectAnimator.ofFloat(first_view, "rotationX", 20f, 0f);firstResumeRotationXanim.setDuration(300);firstResumeRotationXanim.setStartDelay(300);//延迟第一次旋转动画的时间，在这之后再执行//缩放动画ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(first_view, "ScaleX", 1.0f, 0.8f);firstScaleXAnim.setDuration(300);ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(first_view, "ScaleY", 1.0f, 0.8f);firstScaleYAnim.setDuration(300);//由于缩放造成离顶部有一个距离，需要平移ObjectAnimator firstTranslationYAnim = ObjectAnimator.ofFloat(first_view, "translationY", 0f, -0.1f*first_view.getHeight());firstTranslationYAnim.setDuration(300);//第二个view和第一个view动画同时开始执行ObjectAnimator secondTranslationYAnim = ObjectAnimator.ofFloat(second_view, "translationY", second_view.getHeight(), 0f);secondTranslationYAnim.setDuration(300);
//      secondTranslationYAnim.setStartDelay(200);secondTranslationYAnim.addListener(new AnimatorListenerAdapter() {@Overridepublic void onAnimationStart(Animator animation) {super.onAnimationStart(animation);second_view.setVisibility(View.VISIBLE);bt.setClickable(false);}});AnimatorSet set = new AnimatorSet();set.playTogether(firstScaleXAnim,firstScaleYAnim,firstAlphaAnim,firstRotationXanim,firstResumeRotationXanim,firstTranslationYAnim,secondTranslationYAnim);set.start();}

4 Demo

TaoBaoActivity

SeniorUI17_动画：送礼物、淘宝折叠效果相关推荐

语音直播系统送礼物、淘宝折叠效果
一视频送礼物,冒泡泡效果 1 需求点击显示礼物图片 "礼物"由无到有,由小到大,由透明到变实 "礼物"从底部到顶部逐渐平滑"上浮",然后 ...
弘辽科技：淘宝推广效果不好？是由哪些原因造成的？该如何解决？
原标题<弘辽科技:淘宝推广效果不好?是由哪些原因造成的?该如何解决?> 毋庸置疑,使用推广工具对整体提高店铺数据有很大的帮助,效果也会更好.但有些淘宝卖家担心自己没有使用过推广工具,没有相 ...
android动画送礼物,Android开发仿映客送礼物效果
这里写链接内容仿映客送小礼物的特效,顺便复习一下属性动画,话不多说先看效果图. 需求分析可以看到整个动画有几部分组成,那我们就把每个部分拆分出来各个击破. 1.要显示那些内容以及内容间的位置关系? ...
iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码
iOS精选源码物理仿真碰撞陀螺仪使用仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框网络视频直播类--原生socket音视频实时传输--智能家居 Skele ...
原生JS实现简单的淘宝放大镜效果
大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址亲们可以自行更换; <!DOCTYPE html> <html> <hea ...
如何用源生js做出淘宝放大镜效果？
如何用源生js写出淘宝的放大镜效果~? 1,先写出静态界面,分别是两个div,一个div放小图片,另一个div放大图片.(当然这两张图片是一样的,只是大小不一样.) 2.大的那张图片要用backgro ...
iOS物理碰撞、唱吧音频处理、仿淘宝联动效果等源码 1
iOS精选源码物理仿真碰撞陀螺仪使用仿淘宝详情和每日优鲜的一个联动效果 JJNetwork网络库 iOS列表选择弹框网络视频直播类–原生socket音视频实时传输–智能家居 Skeleto ...
【Android 动画】仿淘宝加入购物车动画实现（附件demo）
在开发详情页时,我们需要实现这样一个下面这样的动画. 在看到这个动画设计的时候,我就想到"京东"和"淘宝"的加入购物车的动画. 话不多说,讲一下这个动画的实现原 ...
原生javaScript实现淘宝放大镜效果
大家经常逛淘宝.天猫.京东这类网站的时候往往会看到一些图片展示的效果,例如:把鼠标放在图片上右侧会出现一个放大的预览区域,这就是所谓放大镜效果.今天闲着没事干,就打算复习一下JavaScript基础, ...

SeniorUI17_动画：送礼物、淘宝折叠效果

一效果图

二视频送礼物，冒泡泡效果

1 需求

2 分析

3 主要代码

4 Demo

三淘宝商品折叠效果

1 需求

2 分析

3 主要代码

4 Demo

SeniorUI17_动画：送礼物、淘宝折叠效果相关推荐

最新文章

热门文章

SeniorUI17_动画：送礼物、淘宝折叠效果

一 效果图

二 视频送礼物，冒泡泡效果

1 需求

2 分析

3 主要代码

4 Demo

三 淘宝商品折叠效果

1 需求

2 分析

3 主要代码

4 Demo

SeniorUI17_动画：送礼物、淘宝折叠效果相关推荐

最新文章

热门文章

一效果图

二视频送礼物，冒泡泡效果

三淘宝商品折叠效果