我想做的效果图是
后来知道类似的效果用贝塞尔函数能实现,然后找到了这篇文章:
http://www.jianshu.com/p/791d3a791ec2 (打赏了作者两元,因为作者把原理解析的深入浅出。 简书有打赏功能,好想把文章搬过去,后来想想自己的文章深度还不够,就算了,2333)
我在上面文章demo的基础上改成了如下的效果:
用 Chrome应用启动器的 ARC Welder 和 liceCap(http://www.cockos.com/licecap/)做的gif效果图(ARC Welder 太卡,建议在手机上录制屏幕生成视频文件,然后在PC上播放视频,用liceCap制作gif)
感觉形状的变化可以改进,而且只是个初步的demo。从看到第一个gif图到实现第二个效果图,也是用了两天,所以想拿出来分享下。
package com.shadev.pierrebeziercircle;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.Transformation;
/**
* 代码写的比较仓猝,以后再优化写法和补充那些数值的具体含义,求勿喷QAQ
*/
public class MagicCircle extends View {
private Path mPath;
private Paint mFillCirclePaint;
/** View的宽度 **/
private int width;
/** View的高度,这里View应该是正方形,所以宽高是一样的 **/
private int height;
/** View的中心坐标x **/
private int centerX;
/** View的中心坐标y **/
private int centerY;
private float maxLength;
private float maxWidth;
private float mInterpolatedTime;
private float stretchDistance;
private float moveDistance;
private float cDistance;
private float radius;
private float c;
private float blackMagic = 0.551915024494f;
private VPoint p2,p4;
private HPoint p1,p3;
private float time1 = 0.2f;
private float time2 = 0.5f;
private float time3 = 0.8f;
private float time4 = 0.9f;
private float retangleTime = time1;
/*private float time1 = 0.4f;
private float time2 = 0.6f;
private float time3 = 0.8f;
private float time4 = 0.9f;*/
public MagicCircle(Context context) {
this(context, null, 0);
}
public MagicCircle(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MagicCircle(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mFillCirclePaint = new Paint();
mFillCirclePaint.setColor(0xFFfe626d);
mFillCirclePaint.setStyle(Paint.Style.FILL);
mFillCirclePaint.setStrokeWidth(1);
mFillCirclePaint.setAntiAlias(true);
mPath = new Path();
p2 = new VPoint();
p4 = new VPoint();
p1 = new HPoint();
p3 = new HPoint();
}
@Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
width = getWidth();
height = getHeight();
centerX = width / 2;
centerY = height / 2;
radius = 100;
c = radius*blackMagic;
stretchDistance = radius;
moveDistance = radius*(3/5f);
cDistance = c*0.45f;
maxLength = height - radius -radius;
maxWidth = width - radius -radius;
}
@Override protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPath.reset();
canvas.translate(radius, radius);
if(mInterpolatedTime == 0){
model1(mInterpolatedTime);
float offset = maxLength* (mInterpolatedTime-1000*0.1f);
offset = offset>0?offset:0;
p1.adjustAllX(offset);
p2.adjustAllX(offset);
p3.adjustAllX(offset);
p4.adjustAllX(offset);
canvas.drawRect(p4.x, p3.y, getWidth(), p1.y, mFillCirclePaint);// 长方形
return;
}
if(mInterpolatedTime>=0&&mInterpolatedTime<=time1){
model1(mInterpolatedTime);
float offset = maxLength* (mInterpolatedTime-1000*0.2f);
offset = offset>0?offset:0;
p1.adjustAllX(offset);
p2.adjustAllX(offset);
p3.adjustAllX(offset);
p4.adjustAllX(offset);
mPath.moveTo(p1.x, p2.y);
moveToOffset();
Path path3=new Path();
int trapezoidOffSet = 20;
path3.moveTo(p4.x - trapezoidOffSet, p3.y);
path3.lineTo(p2.x+trapezoidOffSet,p3.y);
path3.lineTo(p2.x+trapezoidOffSet,p1.y);
path3.lineTo(p4.x - trapezoidOffSet, p1.y);
path3.close();
canvas.drawPath(path3, mFillCirclePaint);
return;
}else if(mInterpolatedTime>time1&&mInterpolatedTime<=time2){
model2(mInterpolatedTime);
}else if(mInterpolatedTime>time2&&mInterpolatedTime<=time3){
model3(mInterpolatedTime);
}else if(mInterpolatedTime>time3&&mInterpolatedTime<=time4){
model4(mInterpolatedTime);
}else if(mInterpolatedTime>time4&&mInterpolatedTime<=1){
model5(mInterpolatedTime);
}
moveToOffset();
mPath.moveTo(p4.x, p4.y);
mPath.cubicTo(p4.bottom.x, p4.bottom.y, p1.left.x, p1.left.y, p1.x,p1.y);
mPath.cubicTo(p1.right.x, p1.right.y, p2.bottom.x, p2.bottom.y, p2.x, p2.y);
mPath.cubicTo(p2.top.x, p2.top.y, p3.right.x, p3.right.y, p3.x, p3.y);
mPath.cubicTo(p3.left.x, p3.left.y, p4.top.x, p4.top.y, p4.x, p4.y);
canvas.drawPath(mPath, mFillCirclePaint);
}
private void moveToOffset() {
float yOffset = maxLength*(mInterpolatedTime-time1);
yOffset = yOffset>0?yOffset:0;
p1.adjustAllY(yOffset);
p2.adjustAllY(yOffset);
p3.adjustAllY(yOffset);
p4.adjustAllY(yOffset);
/*float time = mInterpolatedTime * (10f / (retangleTime*10));
if(time<0){
time = 0;
}else if(time >1){
time = 1;
}
float xOffset = (float) (maxWidth*0.6*time+maxWidth*0.4*(mInterpolatedTime-time1));*/
float xOffset = (float) (maxWidth*0.6+maxWidth*0.4*(mInterpolatedTime-time1));
p1.adjustAllX(xOffset);
p2.adjustAllX(xOffset);
p3.adjustAllX(xOffset);
p4.adjustAllX(xOffset);
}
private void model0(){
p1.setY(radius);
p3.setY(-radius);
p3.x = p1.x = 0;
p3.left.x = p1.left.x = -c;
p3.right.x = p1.right.x = c;
p2.setX(radius);
p4.setX(-radius);
p2.y = p4.y = 0;
p2.top.y = p4.top.y = -c;
p2.bottom.y = p4.bottom.y = c;
}
private void model1(float time){//0~0.2 下伸
model0();
//下伸
time = time * (1f / time1);
p1.setY(radius + stretchDistance * time);
}
private void model2(float time){//0.2~0.5
model1(time1);
time = (time - time1) * (1f / (time2-time1));
//往中间靠
p2.adjustAllY(stretchDistance / 2 * time);
p4.adjustAllY(stretchDistance / 2 * time);
//变化M
p1.adjustX(cDistance * time);
p3.adjustX(cDistance * time);
}
private void model3(float time){//0.5~0.8
model2(time2);
time = (time - time2) * (1f / (time3-time2));
//居中
p2.adjustAllY(stretchDistance / 2 * time);
p4.adjustAllY(stretchDistance / 2 * time);
//恢复M值
p1.adjustX(-cDistance * time);
p3.adjustX(-cDistance * time);
//迁移上面的点
p3.adjustAllY(stretchDistance / 2 * time);
}
private void model4(float time){//0.8~0.9
model3(time3);
time = (time - time3) * (1f / (time4-time3));
p3.adjustAllY(stretchDistance / 2 * time);
}
private void model5(float time){
model4(time4);
time = time - time4;
p3.adjustAllY((float) (Math.sin(Math.PI * time * 10f) * (2 / 10f * radius)));
}
class VPoint{
public float x;
public float y;
public PointF top = new PointF();
public PointF bottom = new PointF();
public void setX(float x){
this.x = x;
top.x = x;
bottom.x = x;
}
public void adjustY(float offset){
top.y -= offset;
bottom.y += offset;
}
public void adjustAllX(float offset){
this.x+= offset;
top.x+= offset;
bottom.x+=offset;
}
public void adjustAllY(float offset){
this.y+= offset;
top.y+= offset;
bottom.y+=offset;
}
}
class HPoint{
public float x;
public float y;
public PointF left = new PointF();
public PointF right = new PointF();
public void setY(float y){
this.y = y;
left.y = y;
right.y = y;
}
public void adjustAllX(float offset){
this.x +=offset;
left.x +=offset;
right.x +=offset;
}
public void adjustAllY(float offset){
this.y +=offset;
left.y +=offset;
right.y +=offset;
}
public void adjustX(float offset){
left.x -= offset;
right.x += offset;
}
}
private class MoveAnimation extends Animation {
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
mInterpolatedTime = interpolatedTime;
Log.d("mInterpolatedTime",""+mInterpolatedTime);
invalidate();
}
}
public void startAnimation() {
mPath.reset();
mInterpolatedTime = 0;
MoveAnimation move = new MoveAnimation();
move.setDuration(1500);
move.setInterpolator(new AccelerateDecelerateInterpolator());
//move.setRepeatCount(Animation.INFINITE);
//move.setRepeatMode(Animation.REVERSE);
setVisibility(View.VISIBLE);
startAnimation(move);
}
}
package com.shadev.pierrebeziercircle;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity {
private android.widget.Button btnstart;
private MagicCircle circle3;
private View retangle;
@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
circle3 = (MagicCircle)findViewById(R.id.circle3);
this.btnstart = (Button) findViewById(R.id.btn_start);
btnstart.setOnClickListener(new View.OnClickListener() {
@Override public void onClick(View v) {
circle3.startAnimation();
}
});
}
}