autojs smart ball, the screen is broken

I signed up for the Golden Stone Project Phase 1 Challenge - Divide the 100,000 Prize Pool, this is my 8th article, click to view the event details

Uncle Tooth Tutorial is simple and easy to understand

Effect

ideas

Smart Island is a floating window, we do not do specific functions, only surface work,

So we just write a floating window;

The floating window cannot interfere with the user's operation. Therefore, when drawing the ball, another floating window should be used.

The floating window does not respond to any click events, just draws

So there are two floating windows in total;

• a notification bar
• full screen one

Smart island floating window

xml code

this.window = floaty.rawWindow(
    <card id="root" cardCornerRadius="{{cardCornerRadius}}px" gravity="center" w="{{ windowWidth }}px" h="{{ windowHeight }}px" cardBackgroundColor="#000000">
        <text id="count" w="*" gravity="center" textColor="#ff000f" textSize="{{textSize}}px">
            0
        </text>
    </card>
);
复制代码

In order to have a consistent-looking experience in each medium resolution, the width and height are still calculated first, and then the UI is displayed.

this.config = {
    width: {
        ratio: 0.2,
    },
    height: {
        ratio: 1,
    },
};
this.config.width = parseInt(device.width * this.config.width.ratio);
this.config.height = parseInt(STATUS_BAR_HEIGHT * this.config.height.ratio);
复制代码

In order to get the value of the variable in the UI thread, you need to bind the variable

runtime.ui.bindingContext.windowWidth = windowWidth;
复制代码

If it is too long to remember, you can add code snippets in vscode

"runtime.ui.bindingContext.windowWidth=windowWidth": {
    "scope": "javascript,typescript",
    "prefix": "bindui",
    "body": ["runtime.ui.bindingContext.windowWidth=windowWidth;"],
    "description": "runtime.ui.bindingContext.windowWidth=windowWidth"
  },
复制代码

After entering, enter bindui, you can quickly enter this line of code

runtime.ui.bindingContext.windowWidth = windowWidth;
复制代码

The floating window can be moved arbitrarily, using the code encapsulated in the previous tutorial

makeWindowMoveable
复制代码

The last tutorial is: autojs floating window to translate words

www.yuque.com/yashujs/bfu…

The smart island is finished, let's draw the smart ball

Smart Ball

Click on the smart island, the smart ball appears, and the smart ball is drawn in a full-screen floating window

Full screen floating window

This is the previous fullscreen method

function fullScreen(window) {
    let LayoutParams = android.view.WindowManager.LayoutParams;
    let mWindow = getClassField(window, "mWindow");
    log(mWindow); // com.stardust.autojs.core.floaty.RawWindow@26b1509
    let params = mWindow.getWindowLayoutParams();
    //设置全屏悬浮窗
    params.flags |= LayoutParams.FLAG_FULLSCREEN | LayoutParams.FLAG_LAYOUT_IN_SCREEN | LayoutParams.FLAG_LAYOUT_NO_LIMITS;
    ui.run(function () {
        mWindow.updateWindowLayoutParams(params);
        window.setSize(device.width, device.height);
    });
}
复制代码

full screen now

window.setSize(-1, -1);
复制代码

\

Smart ball slowly appears

Click on the smart island, the smart ball slowly appears

To draw a ball is to use drawCircle of canvas

canvas.drawCircle(ballData.centerX, ballData.centerY, ballData.radius, this.paint);
复制代码

The ball moves down, we can use ValueAnimator to set the monitor to change the height of the center of the ball

this.valueAnimator = ValueAnimator.ofFloat(beginValue, endValue);
this.valueAnimator.setDuration(1000);
this.valueAnimator.addUpdateListener({
    onAnimationUpdate: function (animation) {
        let value = animation.getAnimatedValue();
        ballData.centerY = value;
    },
});
复制代码

add a line

canvas.drawLine(islandWindowRect.centerX, islandWindowRect.centerY, ballData.centerX, ballData.centerY, this.paint);
复制代码

\

where the ball goes

Here we have added two ValueAnimators to control the XY in the movement of the ball;

this.valueAnimatorX = ValueAnimator.ofFloat(beginValueX, endValueX, beginValueX);
this.valueAnimatorY = ValueAnimator.ofFloat(beginValueY, endValueY, beginValueY);
复制代码

animations to run concurrently

this.animatorSet = new AnimatorSet();
this.animatorSet.playTogether(this.valueAnimatorX, this.valueAnimatorY);
this.animatorSet.setDuration(300);
复制代码

Trigger the animation after the finger is pressed and raised

switch (event.getAction()) {
    case event.ACTION_DOWN:
        return true;
    case event.ACTION_MOVE:
        return true;
    case event.ACTION_UP:
        let touchPoint = {
            x: event.getRawX(),
            y: event.getRawY(),
        };
        that.updateTouchValueAnimator(touchPoint);
        that.animatorSet.start();
        return true;
}
复制代码

\

broken screen effect

Use ps to make a picture of broken glass, or make a few more pictures randomly selected to draw

for (var i = 0; i < len; i++) {
    let glass = this.glasses[i];
    canvas.drawBitmap(this.glassBitmap, glass.x - this.glassBitmapHalfWidth, glass.y - this.glassBitmapHalfHeight, this.paint);
}
复制代码

Text tutorial, if I can't hear the sound, I won't add the sound effect

surroundings

Device: Mi 11pro
Android Version: 12
Thunderbolt Emulator: 9.0.17
Android Version: 9
Autojs Version: 9.2.13

famous quotes

Ideas are the most important, other Baidu, bing, stackoverflow, github, Android documentation, autojs documentation, and finally the group to ask --- Uncle Tooth Tutorial

statement

Part of the content comes from the Internet This tutorial is only for learning, and it is prohibited to use it for other purposes

WeChat public account tooth uncle tutorial