HarmonyOS鸿蒙Next应用开发marquee跑马灯效果实现

HarmonyOS鸿蒙Next应用开发marquee跑马灯效果实现

一个跑马灯的效果，我们可以通过按钮控制跑马灯速度，方向，次数，是否流动等操作。

H**tml代码如下：

<div class="container">
    <marquee id="marquee_lianxi" class="customMarquee" scrollamount="{{shudu}}" loop="{{loop}}" direction="{{chuchang}}" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">
        {{marqueeCustomData}}
    </marquee>
    <div class="content">
        <button class="controlButton" onclick="you">右出</button>
        <button class="controlButton" onclick="zhuo">左出</button>
    </div>
    <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}" direction="{{marqueeDir}}" onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">
        {{marqueeCustomData}}
    </marquee>
    <div class="content">
        <button class="controlButton" onclick="onStartClick">Start</button>
        <button class="controlButton" onclick="onStopClick">Stop</button>
    </div>
</div>

C**ss代码如下：

.container {
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
}

.customMarquee {
    width: 100%;
    height: 80px;
    padding: 10px;
    margin: 20px;
    border: 4px solid #ff8888;
    border-radius: 20px;
    font-size: 40px;
    color: #ff8888;
    font-weight: bolder;
    font-family: serif;
    background-color: #ffdddd;
}

.content {
    flex-direction: row;
    width: 300px;
    height: 120px;
}

.controlButton {
    flex-grow: 1;
    width: 300px;
    height: 120px;
}

J**s代码如下：

export default {
    data: {
        scrollAmount: 20,
        loop: true,
        marqueeDir: 'left',
        marqueeCustomData: '富强、民主、文明、和谐, 自由、平等、公正、法治, 爱国、敬业、诚信、友善',
        shudu: 30,
        chuchang : 'right',
        shudu_show:50,
    },
    onMarqueeBounce: function() {
        console.log("onMarqueeBounce");
    },
    onMarqueeStart: function() {
        console.log("onMarqueeStart");
    },
    onMarqueeFinish: function() {
        console.log("onMarqueeFinish");
    },
    onStartClick (evt) {
        this.$element('customMarquee').start();
    },
    onStopClick (evt) {
        this.$element('customMarquee').stop();
    },
    zhuo (evt) {
        this.chuchang = 'right'
    },
    you (evt) {
        this.chuchang = 'left'
    },
}

完整代码地址： https://gitee.com/jltfcloudcn/jump_to/tree/master/JS_marquee


更多关于HarmonyOS鸿蒙Next应用开发marquee跑马灯效果实现的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中实现跑马灯效果，可以使用Text组件结合Animation组件来实现。以下是一个简单的实现步骤：

  1. 创建Text组件：首先，在布局文件中创建一个Text组件，用于显示需要滚动的文本。

  2. 定义Animation：在代码中定义一个Animation对象，设置其属性以实现水平滚动效果。可以通过设置fromXDelta和toXDelta来控制滚动的起始和结束位置。

  3. 启动Animation：将定义好的Animation应用到Text组件上，并启动动画。

  4. 处理重复滚动：为了让跑马灯效果持续滚动，可以设置Animation的repeatCount为Animation.INFINITE，使其无限重复。

以下是一个简单的代码示例：

import { Text, Animation } from '@ohos.arkui';

// 创建Text组件
let text = new Text();
text.text = "这是一个跑马灯效果的文本";

// 定义Animation
let animation = new Animation();
animation.fromXDelta = 0; // 起始位置
animation.toXDelta = -200; // 结束位置
animation.duration = 5000; // 动画持续时间
animation.repeatCount = Animation.INFINITE; // 无限重复

// 启动Animation
text.startAnimation(animation);

更多关于HarmonyOS鸿蒙Next应用开发marquee跑马灯效果实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现跑马灯效果，可以通过Text组件结合Animation动画来实现。首先，使用Text组件显示需要滚动的文本，然后通过Animation设置水平移动的动画效果。具体步骤如下：

  1. 创建Text组件，设置文本内容和样式。
  2. 使用Animation创建水平移动的动画，设置translateX属性实现文本的左右移动。
  3. 通过onFinish回调实现动画的循环播放。

示例代码：

import { Text, Animation } from '@ohos.animator';

const text = new Text();
text.text = "跑马灯效果示例";
text.style.width = '100%';
text.style.textAlign = 'center';

const animation = new Animation();
animation.translateX({ from: 0, to: -200 });
animation.duration = 5000;
animation.onFinish = () => {
  animation.start(); // 循环播放
};
animation.start();
回到顶部