This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging
Present,
I have a lot of leisure time in vacation. Just a few days ago, I reviewed some knowledge of Android in order to solve problems for my elementary school brother. (I still can’t throw away what I learned at work before.)
The finished look (rotatable)
This article focuses on drawing simple patterns using Canvas, custom properties, and rotating animations in the property animation ObjectAnimator
Tip: Here is the body of this article
First, draw a Tai Chi
Let’s start with what’s defined:
private int useWidth; // The final measured value
private int leftcolor; // Left Tai Chi color (black)
private int rightcolor;// Right Tai Chi color (white)
Copy the code1. First, draw a circle with one side black and the other white
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(0.0, useWidth, useWidth), 270.- 180..true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(0.0, useWidth, useWidth), 270.180.true, mPaint);
Copy the codeEffect:
2. Step 2, draw two small circles, black and white
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(useWidth / 4.0, useWidth / 2 +useWidth / 4, useWidth / 2),
270.360.true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
270.360.true, mPaint);
Copy the codeEffect:
3. Third, draw two smaller circles, black and white
mPaint.setColor(leftcolor);
canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);
mPaint.setColor(rightcolor);
canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);
Copy the codeThe effect
Let tai Chi rotate
So let’s just talk a little bit about what we’re defining
private ObjectAnimator objectAnimator;// Attribute animation
private int animaltime;// Animation rotation time (speed)
Copy the code1. How to start the rotation
// Rotate the animation to start the method
public void createAnimation(a) {
if (objectAnimator==null){
objectAnimator = ObjectAnimator.ofFloat(this."rotation".0f.360f);// Add a rotation animation. The rotation center defaults to the midpoint of the control
objectAnimator.setDuration(animaltime);// Set the animation time
objectAnimator.setInterpolator(new LinearInterpolator());// Animation time linear gradient
objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
objectAnimator.start();// Animation starts
}else{
objectAnimator.resume();// The animation continues to start}}Copy the code2. Suspension method of rotation (can continue to rotate)
public void stopAnimation(a){
if(objectAnimator! =null){ objectAnimator.pause();// Animation pause.end () Ends the animation}}Copy the code3. Stop method of rotation (cannot continue rotation)
public void cleanAnimation(a){
if(objectAnimator! =null){ objectAnimator.end();// End the animation}}Copy the code3. Custom properties (color, animation speed)
1. Create an ATTRs file
<declare-styleable name="TaiJiView">
<attr name="leftcolor" format="reference|color"/>
<attr name="rightcolor" format="reference|color"/>
<attr name="animaltime" format="integer"/>
</declare-styleable>
Copy the code3. Used in layouts
app:leftcolor="@color/colorAccent"
app:rightcolor="@color/colorPrimaryDark"
app:animaltime="3000"
Copy the codeJava file to get the values defined in the layout
/** Get custom properties */
private void initCustomAttrs(Context context, AttributeSet attrs) {
// Get custom attributes.
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TaiJiView);
// Get the tai Chi color
leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor, Color.BLACK);
rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor, Color.WHITE);
/ / time
animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000);
/ / recycling
ta.recycle();
}
Copy the codeFinally, let’s run it and see what it looks like
Four, the source code
1.TaiJiView.java
public class TaiJiView extends View{
private Paint mPaint;
private int mWidth;
private int mHeight;
private int useWidth;
private int leftcolor;
private int rightcolor;
private ObjectAnimator objectAnimator;
private int animaltime;
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public TaiJiView(Context context) {
this(context,null);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public TaiJiView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
this(context, attrs, defStyleAttr,0);
initCustomAttrs(context,attrs);
}
@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
public TaiJiView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init(a) {
initPaint();
}
/** Get custom properties */
private void initCustomAttrs(Context context, AttributeSet attrs) {
// Get custom attributes.
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TaiJiView);
// Get the tai Chi color
leftcolor = ta.getColor(R.styleable.TaiJiView_leftcolor, Color.BLACK);
rightcolor=ta.getColor(R.styleable.TaiJiView_rightcolor, Color.WHITE);
animaltime=ta.getInt(R.styleable.TaiJiView_animaltime,1000);
/ / recycling
ta.recycle();
}
/** * Initialize brush */
private void initPaint(a) {
mPaint = new Paint(); // Create the brush object
mPaint.setColor(Color.BLACK); // Set the brush color
mPaint.setStyle(Paint.Style.FILL); // Set the brush mode to Fill
mPaint.setStrokeWidth(10f); // Set the brush width to 10px
mPaint.setAntiAlias(true); // Set anti-aliasing
mPaint.setAlpha(255); // Set the brush opacity
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mWidth = w;
mHeight = h;
useWidth=mWidth;
if (mWidth>mHeight){
useWidth=mHeight;
}
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(0.0, useWidth, useWidth), 270.- 180..true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(0.0, useWidth, useWidth), 270.180.true, mPaint);
mPaint.setColor(leftcolor);
canvas.drawArc(new RectF(useWidth / 4.0, useWidth / 2 +useWidth / 4, useWidth / 2),
270.360.true, mPaint);
mPaint.setColor(rightcolor);
canvas.drawArc(new RectF(useWidth / 4, useWidth / 2, useWidth / 2 + useWidth / 4,useWidth),
270.360.true, mPaint);
mPaint.setColor(leftcolor);
canvas.drawCircle(useWidth/ 2, useWidth * 3 / 4, useWidth/16, mPaint);
mPaint.setColor(rightcolor);
canvas.drawCircle(useWidth / 2, useWidth / 4, useWidth/16, mPaint);
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void createAnimation(a) {
if (objectAnimator==null){
objectAnimator = ObjectAnimator.ofFloat(this."rotation".0f.360f);// Add a rotation animation. The rotation center defaults to the midpoint of the control
objectAnimator.setDuration(animaltime);// Set the animation time
objectAnimator.setInterpolator(new LinearInterpolator());// Animation time linear gradient
objectAnimator.setRepeatCount(ObjectAnimator.INFINITE);
objectAnimator.setRepeatMode(ObjectAnimator.RESTART);
objectAnimator.start();// Animation starts
}else{
objectAnimator.resume();// The animation continues to start
}
}
@RequiresApi(api = Build.VERSION_CODES.KITKAT)
public void stopAnimation(a){
if(objectAnimator! =null){ objectAnimator.pause();// Animation pause.end () Ends the animation}}public void cleanAnimation(a){
if(objectAnimator! =null){ objectAnimator.end();// End the animation}}}Copy the code2. Attrs file
<? xml version="1.0" encoding="utf-8"? > <resources> <declare-styleable name="TaiJiView">
<attr name="leftcolor" format="reference|color"/>
<attr name="rightcolor" format="reference|color"/>
<attr name="animaltime" format="integer"/>
</declare-styleable>
</resources>
Copy the codeconclusion
Hope to be able to help you. If you have any questions, please leave a message. Welcome your comments