プライマー
カスタムビューは、シニアのAndroid UIの知識の重要な部分です。また、流域の上級開発者を区別する。シニア開発者、知識システム、効果を説明するために、可能な限り言語は、彼らが常に解決策を与えることができます。ビジョンの限られた分野への中間レベルの開発者は、多くの場合、複雑なニーズを開始することはできませんが発生します。
いくつかの一見複雑な特殊効果は、実際には、Androidの高度な中級は、高度な知識を必要不可欠である私たちのためのソリューションを、提供してきました。
本論文では、完全なレイダーズを提示し、に魂を確保します。= =!
(プル左GitHubのリンク、あなたは自分自身を見つけることができるなどのインタビューなど、関連するコンテンツへのアクセスを必要とします)
https://github.com/xiangjiana/Android-MS
レンダリング
あなたが見ることができる次の図は、最初に我々はハート型を見て、叩打の波があり、最終的に全体のハート形の緑を埋めます
一見したところ
え?ハートは、描画する方法ですか?え?波が引き出された、だけでなく、どのように上に移動する方法ですか?え?文字は、同じ時間のどの2つの色を見せていますか?
誰かがこのような疑問を持っているかどうかを知るしないでください `` ``読むことを続けてください。
解体の効果
複雑な特殊効果を取得し、最初にすることは、まずよく見る、特定の詳細が出て分割することができ、この効果の内部を慌てる必要はありません。物事はより詳細の単純な組み合わせによって複雑にされています。
スタート解体
図1に示すように、ハート型の描画領域であり、
図2に示すように、徐々に心臓全体を充填下から波は、緑色状
3、中間テキスト「オオカミ」、および波の成長中に、時間テキストの期間があります異なる色の状態の2つの部分。
ケースには、知識を使用しました。
1、 canvas.clipPath 画布裁剪
2、 canvas.save 画布状态保存
3、 canvas.restore 恢复
4、 canvas.translate 画布平移
5、 path.rCubicTo 构建三阶贝塞尔曲线(相当于上一个点位置)
6、属性动画 ValueAnimator / AnimatorSet
开始撸码
第 1步:构建一个心形区域
当一个复杂图形摆在我们面前,而且还是不规则图形,我们首先应该想到的,就是 android.graphics.Path 类,它可以记录复杂图形的全部点组成的路径。关键代码:
/**
* 构建心形
* <p>
* 注意,它这个是以 矩形区域中心点为基准的图形,所以绘制的时候,必须先把坐标轴移动到 区域中心
*/
private void initHeartPath(Path path) {
List<PointF> pointList = new ArrayList<>();
pointList.add(new PointF(0,Utils.dp2px(-38)));
pointList.add(new PointF(Utils.dp2px(50),Utils.dp2px(-103)));
pointList.add(new PointF(Utils.dp2px(112),Utils.dp2px(-61)));
pointList.add(new PointF(Utils.dp2px(112),Utils.dp2px(-12)));
pointList.add(new PointF(Utils.dp2px(112),Utils.dp2px(37)));
pointList.add(new PointF(Utils.dp2px(51),Utils.dp2px(90)));
pointList.add(new PointF(0,Utils.dp2px(129)));
pointList.add(new PointF(Utils.dp2px(-51),Utils.dp2px(90)));
pointList.add(new PointF(Utils.dp2px(-112),Utils.dp2px(37)));
pointList.add(new PointF(Utils.dp2px(-112), Utils.dp2px(-12)));
pointList.add(new PointF(Utils.dp2px(-112),Utils.dp2px(-61)));
pointList.add(new PointF(Utils.dp2px(-50),Utils.dp2px(-103)));
path.reset();
for(int i =0; i <4; i++) {
if (i ==0) {
path.moveTo(pointList.get(i *3).x, pointList.get(i *3).y);
} else {
path.lineTo(pointList.get(i * 3).x, pointList.get(i *3).y);
}
int endPointIndex;
if (i ==3) {
endPointIndex = 0;
} else {
endPointIndex = i *3+3;
}
path.cubicTo(pointList.get(i *3+1).x, pointList.get(i *3+1).y,
pointList.get(i *3+2).x, pointList.get(i *3+2).y,
pointList.get(endPointIndex).x, pointList.get(endPointIndex).y);
//你的心形就是用贝塞尔曲线来画的吗
}
path.close();
path.computeBounds(mHeartRect,false);
//把path所占据的最小矩形区域,返回出去
}
传入一个 Path引用,然后在方法内部对 path进行各种 api调用改变其属性. 这里需要提及一个重点:最后一行代码
path.computeBounds(mHeartRect,false);
意思是,无论什么样的 path,它都会占据一个最小矩形区域,computeBounds
方法可以获取这个矩形区域,设置给入参mHeartRect
.
第 2步:将心形区域裁剪出来, 裁剪之后,后续的绘制都只会显示在这个区域之内
(为了作图方便,我们通常先把坐标轴原点移动到 绘制区域的正中央)
@Override
protected void onDraw(Canvas canvas) {
int width = getWidth();
int height = getHeight();
canvas.translate(width / 2, height /2);
//为了作图方便,我们通常先把坐标轴原点移动到 绘制区域的正中央
...省略无关代码
canvas.clipPath(mMainPath);
//裁剪心形区域
canvas.save();
//保存画布状态
...省略无关代码
}
第 3步:绘制波浪区域
这里有两点细节
1)波浪区域分为两块, top和 bottom 上下两块
2) 整个波浪区域的长度为 心形矩形范围宽度的 2倍 ( ?为什么是2倍?因为上面的波浪动画,其实是整个波浪区域平移造成的视觉效果,为了让这个动画可以无限执行,设计两倍宽度,当一半的宽度向右移动刚好触及心形矩形区域的右边框的时候,让它还原到原始位置,这样就能无缝衔接。)
关键代码1 - 波浪path的构建
/**
* @param ifTop 是否是上部分; 上下部分的封口位置不一样
* @param r 心形的矩形区域
* @param process 当前进度值
*/
private void resetWavePath(boolean ifTop,RectF r,float process,Pathpath) {
final float width = r.width();
final float height = r.width();
path.reset();
if( ifTop) {
path.moveTo(r.left - width, r.top);
} else {
path.moveTo(r.left - width, r.bottom);
//下部,初始位置点在 下
}
float waveHeight = height /8f;//波动的最大幅度
//找到矩形区域的左边线中点
path.lineTo(r.left - width,r.bottom - height * process);
//做两个周期的贝塞尔曲线
for (int i =0; i < 2; i++) {
float px1, py1, px2, py2, px3, py3;
px1 = width /4;
py1 = -waveHeight;
px2 = width /4*3;
py2 = waveHeight;
px3 = width;
py3 = 0;
path.rCubicTo(px1, py1, px2, py2, px3, py3);
}
if (ifTop) {
path.lineTo(r.right, r.top);
} else {
path.lineTo(r.right, r.bottom);
}
path.close();
}
关键代码2- 属性动画改变两个全局变量波浪的向上增长系数以及横向波浪动画系数:
AnimatorSet animatorSet;
// 动起来
public void startAnimator() {
if(animatorSet == null) {
animatorSet = new AnimatorSet();
ValueAnimator growAnimator = ValueAnimator.ofFloat(0f, 1f);
growAnimator.addUpdateListener(animation -> growProcess =(float) animation.getAnimatedValue());
growAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
animatorSet.cancel();
}
});
growAnimator.setInterpolator(new DecelerateInterpolator());
growAnimator.setDuration((long)(4000/ animatorSpeedCoefficient));
ValueAnimator waveAnimator = ValueAnimator.ofFloat(0f,1f);
waveAnimator.setRepeatCount(ValueAnimator.INFINITE);
waveAnimator.setRepeatMode(ValueAnimator.RESTART);
waveAnimator.addUpdateListener(animation -> {
waveProcess = (float) animation.getAnimatedValue();
invalidate();
});
waveAnimator.setInterpolator(new LinearInterpolator());
waveAnimator.setDuration((long)(1000/ animatorSpeedCoefficient));
animatorSet.playTogether(growAnimator, waveAnimator);
animatorSet.start();
} else {
animatorSet.cancel();
animatorSet.start();
}
}
关键代码3- 利用属性动画改变的全局变量,构建动态效果
@Override
protected void onDraw(Canvas canvas) {
int width = getWidth();
int height = getHeight();
canvas.translate(width /2, height /2);
//为了作图方便,我们通常先把坐标轴原点移动到 绘制区域的正中央
curXOffset = waveProcess * mHeartRect.width();
//当前X轴方向上 波浪偏移量
canvas.clipPath(mMainPath);
canvas.save();
mainRect = new Rect();
...省略无关代码
// 上波浪区域
resetWavePath(true, mHeartRect, growProcess, topWavePath);
canvas.translate(curXOffset,0);
canvas.clipPath(topWavePath);
canvas.drawPath(topWavePath, mTopPaint);
...省略无关代码
//下波浪区域
resetWavePath(false, mHeartRect, growProcess, bottomWavePath);
canvas.restore();
canvas.translate(curXOffset,0);
canvas.clipPath(bottomWavePath);
canvas.drawPath(bottomWavePath, mBottomPaint);
...省略无关代码
}
第 4步:绘制“一条大灰狼” 到心形中央,并且达成双色效果
这里有两个细节:
canvas.drawText
, 就算你把paint 设置了 .setTextAlign(Paint.Align.CENTER);
它也未必会在你给的 x,y为中心 绘制。原因就不解释了,谷歌大佬就是这么设计的。解决方法:利用paint.getTextBounds
,获得文字的矩形区域。然后在真正canvas.drawText
,计算y的时候考虑这个矩形区域,就像下面这样如下mainRect = new Rect(); textBottomPaint.getTextBounds(text,0, text.length(), mainRect);
- 由于之前波浪的横向移动,坐标轴产生了平移,所以我绘制文字,要将平移的距离减去,再绘制,保证居中,且文字位置不随着波浪的横向移动而变化。
完整代码如下(此步骤的关键代码已经标红):
结语
来解答 乍一看里面提出的3个问题:
诶?心形是怎么绘制的?答:构建Path,然后
canvas.clipPath
裁剪画布,裁剪之后,所有的作图效果就只在这个心形区域内可见诶?波浪是怎么画出来的,又是如何动起来的?答:波浪,或者说波浪区域,也是 Path构建,主要由一根波浪线以及三根直线组成,是一个封闭区域. 让波浪动起来,其实就是 canvas平移操作,利用属性动画+双倍宽度的波浪区域,形成无缝无限循环动画.
诶? 文字是怎么呈现出同一时刻的两种颜色的?答:在两个相邻的波浪区域,使用不一样的颜色绘制两次文字。视觉效果上还是一串文字,但是实际上是两次绘制的组合效果。神奇吗?神奇个屁,其实就是 同一位置绘制两次文字,后面的覆盖前面的......话粗理不粗- -!
话题延伸
要想随心所欲地掌控自定义View,需要有完整的知识体系。
木の概念構造図
測定、レイアウトは、プロセスの描画
コア原理をスライディングイベント配布/競合することは
、共通のAPIを描くCanvasPaintPath
ビットマップビットマップの
属性のアニメーションを
相互作用は、特定のViewシステムで発生し、システムがソースを知っているあなたを必要とするかもしれない場合は
なく、任意にカスタムビューを使用して、ちょうどので、あなたも必要、十分ではありません:良い数学の基礎
:不規則な形状のほとんどは、のような、数式支援思考が必要な場合がありますので、
ハート型のパスの構築
無限の波デザインのアイデア
以降の記事ベジェを呼ぶことにします
私たちは、数学的基礎が悪ければ数学の授業は、数学的な思考を開発する際に、数年から切り離せないこれらの効果はより困難になる傾向があり始めます。
(プル左GitHubのリンク、あなたは自分自身を見つけることができるなどのインタビューなど、関連するコンテンツへのアクセスを必要とします)
https://github.com/xiangjiana/Android-MS