HarmonyOS API:通用信息

joytrian
发布于 2023-3-28 15:19
浏览
0收藏

版本:v3.1 Beta

渐变样式

更新时间: 2023-02-17 09:19


说明

从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。


组件普遍支持的在style或css中设置的 可以平稳过渡两个或多个指定的颜色。


开发框架支持线性渐变 (linear-gradient)和重复线性渐变 (repeating-linear-gradient)两种渐变效果。

线性渐变/重复线性渐变

使用渐变样式,需要定义过渡方向和过渡颜色。

过渡方向

通过direction或者angle指定过渡方向。


  • direction:进行方向渐变。
  • angle:进行角度渐变。

background: linear-gradient(direction/angle, color, color, ...);
background: repeating-linear-gradient(direction/angle, color, color, ...);

过渡颜色

支持以下四种方式:#ff0000、#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1),需要指定至少两种颜色。


参数:

名称

类型

默认值

必填

描述

direction

to <side-or-corner> <side-or-corner> = [left | right] | [top | bottom]

to bottom (由上到下渐变)

指定过渡方向,如:to left (从右向左渐变) ;或者

to bottom right (从左上角到右下角)。

angle

<deg>

180deg

指定过渡方向,以元素几何中心为坐标原点,水平方向为X轴,angle指定了渐变线与Y轴的夹角(顺时针方向)。

color

<color> [<length>|<percentage>]

-

定义使用渐变样式区域内颜色的渐变效果。

示例:

  1. 默认渐变方向为从上向下渐变。

#gradient {
  height: 300px;
  width: 600px;
  /* 从顶部开始向底部由红色向绿色渐变 */
  background: linear-gradient(red, #00ff00);
}

2.45度夹角渐变。

/* 45度夹角,从红色渐变到绿色 */
  background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));

3.设置方向从左向右渐变。

/* 从左向右渐变,在距离左边90px和距离左边360px (600*0.6) 之间270px宽度形成渐变 */
background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%);

4.重复渐变。

/* 从左向右重复渐变,重复渐变区域30px(60-30)透明度0.5 */
background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);

转场样式

更新时间: 2023-02-17 09:19


说明

从API version 4开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

共享元素转场

属性

名称

类型

默认值

描述

shareid

string

进行共享元素转场时使用,若不配置,则转场样式不生效。共享元素转场当前支持的组件:list-item、image、text、button、label。

样式

名称

类型

默认值

描述

shared-transition-effect

string

exchange

配置共享元素转场时的入场样式。

- exchange(默认值):源页面元素移动到目的页元素位置,并进行适当缩放。

- static:目的页元素位置不变,用户可配置透明度动画。当前仅跳转目标页配置的static效果生效。

shared-transition-name

string

-

转场时,目的页配置的样式优先生效。该样式用于配置共享元素的动画效果,一个由@keyframes定义的动画序列,支持transform和透明度动画。若共享元素效果与自定义的动画冲突,以自定义动画为准。

shared-transition-timing-function

string

friction

转场时,目的页配置的样式优先生效。该属性定义了共享元素转场时的差值曲线。若不配置,默认使用friction曲线。

注意事项

  1. 若同时配置了共享元素转场和自定义页面转场样式,页面转场效果以自定义效果为准。
  2. 共享元素的exchange效果类似下图。


图1 共享元素转场默认效果

HarmonyOS API:通用信息-鸿蒙开发者社区

  1. 共享元素动画对元素的边框、背景色不生效。
  2. 共享元素转场时,由于页面元素会被隐藏,故页面元素配置的动画样式/动画方法失效。
  3. 动态修改shareid5+:组件A的shareid被组件B的shareid覆盖,则组件A的共享元素效果失效,即使组件B的shareid被修改,此时组件A的共享元素效果也不会恢复。

示例

PageA跳转到PageB,跳转的共享元素为image, shareid为“shareImage”。

<!-- PageA -->
<!-- xxx.hml -->
<div>
  <list>
    <list-item type="description">
      <image src="item.jpg" shareid="shareImage" onclick="jump" class="shared-transition-style"></image>
    </list-item>
    <list-item>
      <text onclick="jump">Click on picture to Jump to ths details</text>
    </list-item>
  </list>
</div>

// xxx.js
import router from '@ohos.router';
export default {
  jump() {
    router.push({
      // 路径要与config.json配置里面的相同
      url: 'pages/detailpage',
    });
  },
}

/* xxx.css */
.shared-transition-style {
  shared-transition-effect: exchange;
  shared-transition-name: shared-transition;
}
@keyframes shared-transition {
  from { opacity: 0; }
  to { opacity: 1; }
}

<!-- PageB -->
<!-- xxx.hml -->
<div>
  <image src="itemDetail.jpg" shareid="shareImage" onclick="jumpBack" class="shared-transition-style"></image>
</div>

// xxx.js
import router from '@ohos.router';
export default {
  jumpBack() {
    router.back();
  },
}

/* xxx.css */
.shared-transition-style {
  shared-transition-effect: exchange;
  shared-transition-name: shared-transition;
}
@keyframes shared-transition {
  from { opacity: 0; }
  to { opacity: 1; }
}

页面转场样式

样式

名称

类型

默认值

描述

transition-enter

string

-

与@keyframes配套使用,支持transform和透明度动画,详见​​动画样式 表 @keyframes属性说明​​。

transition-exit

string

-

与@keyframes配套使用,支持transform和透明度动画,详见​​动画样式 表 @keyframes属性说明​​。

transition-duration

string

跟随设备默认的页面转场时间

支持的单位为[s(秒)|ms(毫秒) ],默认单位为ms,未配置时使用系统默认值。

transition-timing-function

string

friction

描述转场动画执行的速度曲线,用于使转场更为平滑。详细参数见​​动画样式​​中“animation-timing-function”有效值说明。

注意事项

  1. 配置自定义转场时,建议配置页面背景色为不透明颜色,否则在转场过程中可能会出现衔接不自然的现象。
  2. transition-enter和transition-exit可单独配置,没有配置时使用系统默认的参数。

  3. transition-enter/transition-exit说明如下:
    a. push场景下:进入页面栈的Page2.js应用transition-enter描述的动画配置;进入页面栈第二位置的Page1.js应用transition-exit描述的动画配置。
  4. HarmonyOS API:通用信息-鸿蒙开发者社区

  5. b. back场景下:退出页面栈的Page2.js应用transition-enter描述的动画配置,并进行倒播;从页面栈第二位置进入栈顶位置的Page1.js应用transition-exit描述的动画配置,并进行倒播。
  6. HarmonyOS API:通用信息-鸿蒙开发者社区

示例

Page1有一个不透明盒子,点击盒子会跳转到Page2,当点击Page2中的盒子,会回退到Page1页面。

  1. Page1

<!-- xxx.hml -->
<div class="container">
    <text>index</text>
    <div class="move_page" onclick="jump"></div>
</div>

// xxx.js
import router from '@ohos.router';
export default {
    data: {

    },
    jump() {
        router.push({
            url:'pages/transition2/transition2'
        })
    }
}

/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.move_page {
    width: 100px;
    height: 100px;
    background-color: #72d3fa;
    transition-enter: go_page;
    transition-exit: exit_page;
    transition-duration: 5s;
    transition-timing-function: friction;
}

@keyframes go_page {
    from {
        opacity: 0;
        transform: translate(0px) rotate(60deg) scale(1.0);
    }

    to {
        opacity: 1;
        transform: translate(100px) rotate(360deg) scale(1.0);
    }
}
@keyframes exit_page {
    from {
        opacity: 1;
        transform: translate(200px) rotate(60deg) scale(2);
    }

    to {
        opacity: 0;
        transform: translate(200px) rotate(360deg) scale(2);
    }
}
  1. Page2

<!-- xxx.hml -->
<div class="container">
    <text>transition</text>
    <div class="move_page" onclick="jumpBack"></div>
</div>

// xxx.js
import router from '@ohos.router';
export default {
    data: {

    },
    jumpBack() {
        router.back()
    }
}

/* xxx.css */
.container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.move_page {
    width: 100px;
    height: 100px;
    background-color: #f172fa;
    transition-enter: go_page;
    transition-exit: exit_page;
    transition-duration: 5s;
    transition-timing-function: ease;
}

@keyframes go_page {
    from {
        opacity: 0;
        transform:translate(100px) rotate(0deg) scale(1.0);
    }
    to {
        opacity: 1;
        transform:translate(100px) rotate(180deg) scale(2.0);
    }
}

@keyframes exit_page {
    from {
        opacity: 1;
        transform: translate(0px) rotate(60deg) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(0px) rotate(360deg) scale(1);
    }
}


文章转载自:​​https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/js-components-common-transition-0000001428061788-V3?catalogVersion=V3#ZH-CN_TOPIC_0000001428061788__示例-2​

已于2023-3-28 15:19:17修改
收藏
回复
举报
回复
    相关推荐