Added random movement speed

[aa12110]

Modify Herta's movement speed from fixed to randomly generated within a range to add interest

[fred913]

@Undead34 I don't actually think so. According to the code diff, it changes the speed from 20 to a random number between [20, ~50]. It should increase the speed I guess?

[monetjoe]

Modify Herta's movement speed from fixed to randomly generated within a range to add interest

Thx 4 ur modification, please give us a preview of your version by deploying on Netlify, Render, Vercel, Cloudflare or Github Pages to let us decide if it impact the performance of page speed. Only by code review can only guess the outcome, but the experiment can directly help us see the truth. This PR has been here for a while, it is time to check whether it is worth merging

[aa12110]

Of course, this is a preview link: https://aa12110.github.io/

[monetjoe]

Of course, this is a preview link: https://aa12110.github.io/

Thx 4 ur reply, let me check~

[monetjoe]

Of course, this is a preview link: https://aa12110.github.io/

It is a good modification, but it will be better if we put it into settings as an option to let users decide which movement mode to use: random speed or constant speed ~~~

[aa12110]

It is a good modification, but it will be better if we put it into settings as an option to let users decide which movement mode to use: random speed or constant speed ~~~

Yes, I was wondering if it would be possible to add a drag bar to allow the user to select the speed.

[blacktunes]

The current animation does not consider screen width, so there may be a problem with the animation only appearing after the sound playback ends on the phone, so the random value should be changed to the total duration

// playKuru
audio.oncanplay = () => {
    animateHerta()
    audio.play()
}

function animateHerta() {
    const random = Math.floor(Math.random() * 2) + 1
    let elem = document.createElement('img')
    elem.src = cacheStaticObj(`img/hertaa${random}.gif`)
    elem.style.zIndex = '-10'
    elem.style.transform = 'translate3d(100%, 0, 0)'
    elem.style.position = 'absolute'
    elem.style.right = '0'
    elem.style.top = counterButton.getClientRects()[0].bottom + scrollY - 430 + 'px'
    document.body.appendChild(elem)

    const randomTime = (Math.random() + 0.5) * 1000
    let lastUpdate = Date.now()
    let totalTime = 0
    let position = 0
    const herta = () => {
        let current = Date.now()
        position += (current - lastUpdate) * (100 / randomTime)
        totalTime += (current - lastUpdate)
        lastUpdate = current
        console.log(position)
        elem.style.right = `${position}%`
        elem.style.transform = `translate3d(${100 - position}%, 0, 0)`
        if (totalTime > randomTime) {
            elem.remove()
            elem = null
            return
        }
        requestAnimationFrame(herta)
    }

    requestAnimationFrame(herta)
}

Or use keyframe animation, like this https://github.com/blacktunes/herta_kuru/blob/dev/static/js/script.js#L413-L425 https://github.com/blacktunes/herta_kuru/blob/dev/static/css/style.css#L319-L340

[aa12110]

The current animation does not consider screen width, so there may be a problem with the animation only appearing after the sound playback ends on the phone, so the random value should be changed to the total duration

Yes, I have now changed the way it runs to determine the screen width to determine the running speed

[aa12110]

Of course, this is a preview link: https://aa12110.github.io/

It is a good modification, but it will be better if we put it into settings as an option to let users decide which movement mode to use: random speed or constant speed ~~~

This is the version after the fix, the random speed switch added and the progress bar of the custom movement speed 这是修复后的版本，添加的随机速度开关以及自定义运动速度的进度条

preview link: https://aa12110.github.io/ 预览链接：https://aa12110.github.io/

[monetjoe]

辛苦了，不过看了下preview有BUG，GIF不见了。。。

[monetjoe]

Of course, this is a preview link: https://aa12110.github.io/

It is a good modification, but it will be better if we put it into settings as an option to let users decide which movement mode to use: random speed or constant speed ~~~

This is the version after the fix, the random speed switch added and the progress bar of the custom movement speed 这是修复后的版本，添加的随机速度开关以及自定义运动速度的进度条

preview link: https://aa12110.github.io/ 预览链接：https://aa12110.github.io/

我知道原因了，降低一下速度上限吧，太快看起来GIF会消失的样子

[aa12110]

我知道原因了，降低一下速度上限吧，太快看起来GIF会消失的样子

什么设备呢？大概屏幕宽度是多少，我看看能不能复现

[monetjoe]

我知道原因了，降低一下速度上限吧，太快看起来GIF会消失的样子

什么设备呢？大概屏幕宽度是多少，我看看能不能复现

把这个速度拉满

[blacktunes]

我还是建议用时间作为随机量和keyframes动画做这个效果，会简单很多 或者你先做完我在改，我主要想把根据语音时长播放动画加上 你这pr一直没合并我不好发pr，铁定会冲突

[aa12110]

把这个速度拉满

ok我知道什么问题的，已修复

[fred913]

@blacktunes No worries about merging haha, I'll do it @aa12110 Please implement the slider using the one from MDUI framework, such as

<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100"/>
</label>

so we can make the styles of all the element unified.

[aa12110]

@blacktunes No worries about merging haha, I'll do it @aa12110 Please implement the slider using the one from MDUI framework, such as

<label class="mdui-slider mdui-slider-discrete">
  <input type="range" step="1" min="0" max="100"/>
</label>

so we can make the styles of all the element unified.

OK，add in

[fred913]

@aa12110 Much thanks for your hard work! Let me review it so we can merge them.