android 文字fly动画,超好看的下拉刷新动画Android代码实现

于 2021-05-25 17:25:02 发布
阅读量309 收藏
点赞数
文章标签： android 文字fly动画

最近看到了好多高端、大气、上档次的动画效果，如果给你的项目中加上这些动画，相信你的app一定很优秀，今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画。

首先我们看一下效果如何：

f41092514777d20ae30323c4e5026920.gif

怎么样？是不是很高大上？接下来我们看一下代码：

一、首先我们需要自定义刷新的动态RefreshView(也就是下拉时候的头)1.初始化头所占用的Dimens

private void initiateDimens() {

mScreenWidth = mContext.getResources().getDisplayMetrics().widthPixels;

mJetTopOffset = mParent.getTotalDragDistance() * 0.5f;

mTop = -mParent.getTotalDragDistance();

}

2.为头填充图片，设置图片的大小

分别为左边的云彩，右边的云彩，中间的云彩还有中间的飞机，飞机是带有动画的，下面会介绍飞机的动画

private void createBitmaps() {

mLeftClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_left);

mRightClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_right);

mFrontClouds = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.clouds_center);

mJet = BitmapFactory.decodeResource(mContext.getResources(), R.drawable.airplane);

mJetWidthCenter = mJet.getWidth() / 2;

mJetHeightCenter = mJet.getHeight() / 2;

mFrontCloudWidthCenter = mFrontClouds.getWidth() / 2;

mFrontCloudHeightCenter = mFrontClouds.getHeight() / 2;

mRightCloudsWidthCenter = mRightClouds.getWidth() / 2;

mRightCloudsHeightCenter = mRightClouds.getHeight() / 2;

mLeftCloudsWidthCenter = mLeftClouds.getWidth() / 2;

mLeftCloudsHeightCenter = mLeftClouds.getHeight() / 2;

}

3.然后我们来画这个头

public void draw(@NonNull Canvas canvas) {

final int saveCount = canvas.save();

// DRAW BACKGROUND.

canvas.drawColor(mContext.getResources().getColor(R.color.sky_background));

if (isRefreshing) {

// Set up new set of wind

while (mWinds.size() < WIND_SET_AMOUNT) {

float y = (float) (mParent.getTotalDragDistance() / (Math.random() * RANDOM_Y_COEFFICIENT));

float x = random(MIN_WIND_X_OFFSET, MAX_WIND_X_OFFSET);

// Magic with checking interval between winds

if (mWinds.size() > 1) {

y = 0;

while (y == 0) {

float tmp = (float) (mParent.getTotalDragDistance() / (Math.random() * RANDOM_Y_COEFFICIENT));

for (Map.Entry wind : mWinds.entrySet()) {

// We want that interval will be greater than fifth part of draggable distance

if (Math.abs(wind.getKey() - tmp) > mParent.getTotalDragDistance() / RANDOM_Y_COEFFICIENT) {

y = tmp;

} else {

y = 0;

break;

}

}

}

}

mWinds.put(y, x);

drawWind(canvas, y, x);

}

// Draw current set of wind

if (mWinds.size() >= WIND_SET_AMOUNT) {

for (Map.Entry wind : mWinds.entrySet()) {

drawWind(canvas, wind.getKey(), wind.getValue());

}

}

// We should to create new set of winds

if (mInverseDirection && mNewWindSet) {

mWinds.clear();

mNewWindSet = false;

mWindLineWidth = random(MIN_WIND_LINE_WIDTH, MAX_WIND_LINE_WIDTH);

}

// needed for checking direction

mLastAnimationTime = mLoadingAnimationTime;

}

drawJet(canvas);

drawSideClouds(canvas);

drawCenterClouds(canvas);

canvas.restoreToCount(saveCount);

}

/**

* Draw wind on loading animation

*

* @param canvas - area where we will draw

* @param y - y position fot one of lines

* @param xOffset - x offset for on of lines

*/

private void drawWind(Canvas canvas, float y, float xOffset) {

/* We should multiply current animation time with this coefficient for taking all screen width in time

Removing slowing of animation with dividing on {@LINK #SLOW_DOWN_ANIMATION_COEFFICIENT}

And we should don't forget about distance that should "fly" line that depend on screen of device and x offset

*/

float cof = (mScreenWidth + xOffset) / (LOADING_ANIMATION_COEFFICIENT / SLOW_DOWN_ANIMATION_COEFFICIENT);

float time = mLoadingAnimationTime;

// HORRIBLE HACK FOR REVERS ANIMATION THAT SHOULD WORK LIKE RESTART ANIMATION

if (mLastAnimationTime - mLoadingAnimationTime > 0) {

mInverseDirection = true;

// take time from 0 to end of animation time

time = (LOADING_ANIMATION_COEFFICIENT / SLOW_DOWN_ANIMATION_COEFFICIENT) - mLoadingAnimationTime;

} else {

mNewWindSet = true;

mInverseDirection = false;

}

// Taking current x position of drawing wind

// For fully disappearing of line we should subtract wind line width

float x = (mScreenWidth - (time * cof)) + xOffset - mWindLineWidth;

float xEnd = x + mWindLineWidth;

canvas.drawLine(x, y, xEnd, y, mWindPaint);

}

private void drawSideClouds(Canvas canvas) {

Matrix matrixLeftClouds = mMatrix;

Matrix matrixRightClouds = mAdditionalMatrix;

matrixLeftClouds.reset();

matrixRightClouds.reset();

// Drag percent will newer get more then 1 here

float dragPercent = Math.min(1f, Math.abs(mPercent));

boolean overdrag = false;

// But we check here for overdrag

if (mPercent > 1.0f) {

overdrag = true;

}

float scale;

float scalePercentDelta = dragPercent - SCALE_START_PERCENT;

if (scalePercentDelta > 0) {

float scalePercent = scalePercentDelta / (1.0f - SCALE_START_PERCENT);

scale = SIDE_CLOUDS_INITIAL_SCALE + (SIDE_CLOUDS_FINAL_SCALE - SIDE_CLOUDS_INITIAL_SCALE) * scalePercent;

} else {

scale = SIDE_CLOUDS_INITIAL_SCALE;

}

// Current y position of clouds

float dragYOffset = mParent.getTotalDragDistance() * (1.0f - dragPercent);

// Position where clouds fully visible on screen and we should drag them with content of listView

int cloudsVisiblePosition = mParent.getTotalDragDistance() / 2 - mLeftCloudsHeightCenter;

boolean needMoveCloudsWithContent = false;

if (dragYOffset < cloudsVisiblePosition) {

needMoveCloudsWithContent = true;

}

float offsetRightX = mScreenWidth - mRightClouds.getWidth();

float offsetRightY = (needMoveCloudsWithContent

? mParent.getTotalDragDistance() * dragPercent - mLeftClouds.getHeight()

: dragYOffset)

+ (overdrag ? mTop : 0);

float offsetLeftX = 0;

float offsetLeftY = (needMoveCloudsWithContent

? mParent.getTotalDragDistance() * dragPercent - mLeftClouds.getHeight()

: dragYOffset)

+ (overdrag ? mTop : 0);

// Magic with animation on loading process

if (isRefreshing) {

if (checkCurrentAnimationPart(AnimationPart.FIRST)) {

offsetLeftY += getAnimationPartValue(AnimationPart.FIRST) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;

offsetRightX -= getAnimationPartValue(AnimationPart.FIRST) / X_SIDE_CLOUDS_SLOW_DOWN_COF;

} else if (checkCurrentAnimationPart(AnimationPart.SECOND)) {

offsetLeftY += getAnimationPartValue(AnimationPart.SECOND) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;

offsetRightX -= getAnimationPartValue(AnimationPart.SECOND) / X_SIDE_CLOUDS_SLOW_DOWN_COF;

} else if (checkCurrentAnimationPart(AnimationPart.THIRD)) {

offsetLeftY -= getAnimationPartValue(AnimationPart.THIRD) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;

offsetRightX += getAnimationPartValue(AnimationPart.THIRD) / X_SIDE_CLOUDS_SLOW_DOWN_COF;

} else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) {

offsetLeftY -= getAnimationPartValue(AnimationPart.FOURTH) / X_SIDE_CLOUDS_SLOW_DOWN_COF;

offsetRightX += getAnimationPartValue(AnimationPart.FOURTH) / Y_SIDE_CLOUDS_SLOW_DOWN_COF;

}

}

matrixRightClouds.postScale(scale, scale, mRightCloudsWidthCenter, mRightCloudsHeightCenter);

matrixRightClouds.postTranslate(offsetRightX, offsetRightY);

matrixLeftClouds.postScale(scale, scale, mLeftCloudsWidthCenter, mLeftCloudsHeightCenter);

matrixLeftClouds.postTranslate(offsetLeftX, offsetLeftY);

canvas.drawBitmap(mLeftClouds, matrixLeftClouds, null);

canvas.drawBitmap(mRightClouds, matrixRightClouds, null);

}

private void drawCenterClouds(Canvas canvas) {

Matrix matrix = mMatrix;

matrix.reset();

float dragPercent = Math.min(1f, Math.abs(mPercent));

float scale;

float overdragPercent = 0;

boolean overdrag = false;

if (mPercent > 1.0f) {

overdrag = true;

// Here we want know about how mach percent of over drag we done

overdragPercent = Math.abs(1.0f - mPercent);

}

float scalePercentDelta = dragPercent - SCALE_START_PERCENT;

if (scalePercentDelta > 0) {

float scalePercent = scalePercentDelta / (1.0f - SCALE_START_PERCENT);

scale = CENTER_CLOUDS_INITIAL_SCALE + (CENTER_CLOUDS_FINAL_SCALE - CENTER_CLOUDS_INITIAL_SCALE) * scalePercent;

} else {

scale = CENTER_CLOUDS_INITIAL_SCALE;

}

float parallaxPercent = 0;

boolean parallax = false;

// Current y position of clouds

float dragYOffset = mParent.getTotalDragDistance() * dragPercent;

// Position when should start parallax scrolling

int startParallaxHeight = mParent.getTotalDragDistance() - mFrontCloudHeightCenter;

if (dragYOffset > startParallaxHeight) {

parallax = true;

parallaxPercent = dragYOffset - startParallaxHeight;

}

float offsetX = (mScreenWidth / 2) - mFrontCloudWidthCenter;

float offsetY = dragYOffset

- (parallax ? mFrontCloudHeightCenter + parallaxPercent : mFrontCloudHeightCenter)

+ (overdrag ? mTop : 0);

float sx = overdrag ? scale + overdragPercent / 4 : scale;

float sy = overdrag ? scale + overdragPercent / 2 : scale;

if (isRefreshing && !overdrag) {

if (checkCurrentAnimationPart(AnimationPart.FIRST)) {

sx = scale - (getAnimationPartValue(AnimationPart.FIRST) / LOADING_ANIMATION_COEFFICIENT) / 8;

} else if (checkCurrentAnimationPart(AnimationPart.SECOND)) {

sx = scale - (getAnimationPartValue(AnimationPart.SECOND) / LOADING_ANIMATION_COEFFICIENT) / 8;

} else if (checkCurrentAnimationPart(AnimationPart.THIRD)) {

sx = scale + (getAnimationPartValue(AnimationPart.THIRD) / LOADING_ANIMATION_COEFFICIENT) / 6;

} else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) {

sx = scale + (getAnimationPartValue(AnimationPart.FOURTH) / LOADING_ANIMATION_COEFFICIENT) / 6;

}

sy = sx;

}

matrix.postScale(sx, sy, mFrontCloudWidthCenter, mFrontCloudHeightCenter);

matrix.postTranslate(offsetX, offsetY);

canvas.drawBitmap(mFrontClouds, matrix, null);

}

private void drawJet(Canvas canvas) {

Matrix matrix = mMatrix;

matrix.reset();

float dragPercent = mPercent;

float rotateAngle = 0;

// Check overdrag

if (dragPercent > 1.0f && !mEndOfRefreshing) {

rotateAngle = (dragPercent % 1) * 10;

dragPercent = 1.0f;

}

float offsetX = ((mScreenWidth * dragPercent) / 2) - mJetWidthCenter;

float offsetY = mJetTopOffset

+ (mParent.getTotalDragDistance() / 2)

* (1.0f - dragPercent)

- mJetHeightCenter;

if (isRefreshing) {

if (checkCurrentAnimationPart(AnimationPart.FIRST)) {

offsetY -= getAnimationPartValue(AnimationPart.FIRST);

} else if (checkCurrentAnimationPart(AnimationPart.SECOND)) {

offsetY -= getAnimationPartValue(AnimationPart.SECOND);

} else if (checkCurrentAnimationPart(AnimationPart.THIRD)) {

offsetY += getAnimationPartValue(AnimationPart.THIRD);

} else if (checkCurrentAnimationPart(AnimationPart.FOURTH)) {

offsetY += getAnimationPartValue(AnimationPart.FOURTH);

}

}

matrix.setTranslate(offsetX, offsetY);

if (dragPercent == 1.0f) {

matrix.preRotate(rotateAngle, mJetWidthCenter, mJetHeightCenter);

}

canvas.drawBitmap(mJet, matrix, null);

}

动画效果已经画好了，下面我们来看看怎么结合下拉刷新来调用吧？

二、我们还需要自定义一个PullToRefreshView(下拉刷新)1.我们的PullToRefreshView这里需要继承ViewGroup

我们先把刚才定义的刷新时的动画加进来

private RefreshView mRefreshView;

private ImageView mRefreshImageView;
mRefreshImageView = new ImageView(context);

mRefreshView = new RefreshView(getContext(), this);

mRefreshImageView.setImageDrawable(mRefreshView);

addView(mRefreshImageView);

2.然后我们设置OntouchEvent()事件

@Override

public boolean onTouchEvent(@NonNull MotionEvent ev) {

if (!mIsBeingDragged) {

return super.onTouchEvent(ev);

}

final int action = MotionEventCompat.getActionMasked(ev);

switch (action) {

case MotionEvent.ACTION_MOVE: {

final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);

if (pointerIndex < 0) {

return false;

}

final float y = MotionEventCompat.getY(ev, pointerIndex);

final float yDiff = y - mInitialMotionY;

final float scrollTop = yDiff * DRAG_RATE;

mCurrentDragPercent = scrollTop / mTotalDragDistance;

if (mCurrentDragPercent < 0) {

return false;

}

float boundedDragPercent = Math.min(1f, Math.abs(mCurrentDragPercent));

float extraOS = Math.abs(scrollTop) - mTotalDragDistance;

float slingshotDist = mTotalDragDistance;

float tensionSlingshotPercent = Math.max(0,

Math.min(extraOS, slingshotDist * 2) / slingshotDist);

float tensionPercent = (float) ((tensionSlingshotPercent / 4) - Math.pow(

(tensionSlingshotPercent / 4), 2)) * 2f;

float extraMove = (slingshotDist) * tensionPercent / 2;

int targetY = (int) ((slingshotDist * boundedDragPercent) + extraMove);

mRefreshView.setPercent(mCurrentDragPercent);

setTargetOffsetTop(targetY - mCurrentOffsetTop, true);

break;

}

case MotionEventCompat.ACTION_POINTER_DOWN:

final int index = MotionEventCompat.getActionIndex(ev);

mActivePointerId = MotionEventCompat.getPointerId(ev, index);

break;

case MotionEventCompat.ACTION_POINTER_UP:

onSecondaryPointerUp(ev);

break;

case MotionEvent.ACTION_UP:

case MotionEvent.ACTION_CANCEL: {

if (mActivePointerId == INVALID_POINTER) {

return false;

}

final int pointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);

final float y = MotionEventCompat.getY(ev, pointerIndex);

final float overScrollTop = (y - mInitialMotionY) * DRAG_RATE;

mIsBeingDragged = false;

if (overScrollTop > mTotalDragDistance) {

setRefreshing(true, true);

} else {

mRefreshing = false;

animateOffsetToPosition(mAnimateToStartPosition);

}

mActivePointerId = INVALID_POINTER;

return false;

}

}

return true;

}

三、最后我们看怎样在Activity中使用这个下拉刷新控件1.先看一下布局文件

这里是我们的下拉刷新空间嵌套着我们的ListView，然后我们再给ListView填充数据即可

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".PullToRefreshActivity">

android:id="@+id/pull_to_refresh"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/list_view"

android:divider="@null"

android:dividerHeight="0dp"

android:fadingEdge="none"

android:layout_width="match_parent"

android:layout_height="match_parent" />

2.为ListView填充数据

为了我们的效果比较好看，这里我们给ListView的每一个item填充不同的颜色，看起来会比较高大上。

Map map;

List> sampleList = new ArrayList>();

int[] colors = {

R.color.saffron,

R.color.eggplant,

R.color.sienna};

int[] tripNames = {

R.string.trip_to_india,

R.string.trip_to_italy,

R.string.trip_to_indonesia};

for (int i = 0; i < tripNames.length; i++) {

map = new HashMap();

map.put(SampleAdapter.KEY_NAME, tripNames[i]);

map.put(SampleAdapter.KEY_COLOR, colors[i]);

sampleList.add(map);

}

ListView listView = (ListView) findViewById(R.id.list_view);

listView.setAdapter(new SampleAdapter(this, R.layout.list_item, sampleList));

3.最后，我们再设置一下下拉刷新的监听事件就OK了

mPullToRefreshView = (PullToRefreshView) findViewById(R.id.pull_to_refresh);

mPullToRefreshView.setOnRefreshListener(new PullToRefreshView.OnRefreshListener() {

@Override

public void onRefresh() {

mPullToRefreshView.postDelayed(new Runnable() {

@Override

public void run() {

mPullToRefreshView.setRefreshing(false);

}

}, REFRESH_DELAY);

}

});

怎么样？有没有很高大上啊？

大家可以动手实践一下，希望对大家的学习有所帮助。

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值