seo整站优化更能准确获得客户,百度手机点击排名工具,网站百科源码,建筑网校培训机构排名注#xff1a;本文内容分享转载自 HarmonyOS Developer 官网文档
点击查看《开发指导—利用CSS动画实现HarmonyOS动效#xff08;一#xff09;》 3. background-position 样式动画
通过改变 background-position 属性#xff08;第一个值为 X 轴的位置#xff0c;第二个…注本文内容分享转载自 HarmonyOS Developer 官网文档
点击查看《开发指导—利用CSS动画实现HarmonyOS动效一》 3. background-position 样式动画
通过改变 background-position 属性第一个值为 X 轴的位置第二个值为 Y 轴的位置移动背景图片位置若背景图位置超出组件则超出部分的背景图不显示。 !-- xxx.hml --div classcontainer div classcontent/div div classcontent1/div/div
/* xxx.css */.container { height: 100%; background-color:#F1F3F5; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;}.content{ width: 400px; height: 400px; /* 不建议图片长宽比为1:1 */ background-image: url(common/images/bg-tv.jpg); background-size: 100%; background-repeat: no-repeat; animation: change 3s infinite; border: 1px solid black;}.content1{ margin-top:50px; width: 400px; height: 400px; background-image: url(common/images/bg-tv.jpg); background-size: 50%; background-repeat: no-repeat; animation: change1 5s infinite; border: 1px solid black;}/* 背景图片移动出组件 */keyframes change{ 0%{ background-position:0px top; } 25%{ background-position:400px top; } 50%{ background-position:0px top; } 75%{ background-position:0px bottom; } 100%{ background-position:0px top; }}/* 背景图片在组件内移动 */keyframes change1{ 0%{ background-position:left top; } 25%{ background-position:50% 50%; } 50%{ background-position:right bottom; } 100%{ background-position:left top;; }}
说明
background-position 仅支持背景图片的移动不支持背景颜色background-color。 4. svg 动画
为 svg 组件添加动画效果。
属性样式动画
在 Svg 的子组件animate中通过 attributeName 设置需要进行动效的属性from 设置开始值to 设置结束值。 !-- xxx.hml --div classcontainer svg text x300 y300 fillblue Hello animate attributeNamefont-size from30 to60 dur3s repeatCountindefinite /animate animate attributeNamefill fromred toblue dur3s repeatCountindefinite /animate animate attributeNameopacity from1 to0.3 dur3s repeatCountindefinite /animate /text text x300 y600 fillblue World animate attributeNamefont-size from30 to60 values30;80 dur3s repeatCountindefinite /animate animate attributeNamefill fromred toblue dur3s repeatCountindefinite /animate animate attributeNameopacity from0.3 to1 dur3s repeatCountindefinite /animate /text /svg/div 说明
在设置动画变化值时如果已经设置了 values 属性则 from 和 to 都失效。 路径动画
在 Svg 的子组件animateMotion中通过 path 设置动画变化的路径。 !-- xxx.hml --div classcontainer svg fillwhite width800 height900 path dM300,200 h-150 a150 150 0 1 0 150 -150 z fillwhite strokeblue stroke-width5 /path path fillred dM-5,-5 L10,0 L-5,5 L0,0 Z animateMotion dur2000 repeatCountindefinite rotateauto-reversepathM300,200 h-150 a150 150 0 1 0 150 -150 z /animateMotion /path /svg/divanimateTransform 动画
在 Svg 的子组件animateTransform中通过 attributeName 绑定 transform 属性type 设置动画类型from 设置开始值to 设置结束值。 !-- xxx.hml --div classcontainer style svg line x190 y1300 x290 y2730 stroke-width10 strokeblack stroke-linecapround animateTransform attributeNametransform attributeTypeXML typetranslate dur3s values0;30;10;30;20;30;25;30 keyTimes0;0.3;0.5;0.7;0.8;0.9;1.0;1.1 fillfreeze /animateTransform /line circle cx500 cy500 r50 stroke-width15 fillred stroke#e70d0d animateTransform attributeNametransform attributeTypeXML typerotate dur3s values0;30;10;30;20;30;25;30 keyTimes0;0.3;0.5;0.7;0.8;0.9;1.0;1.1 fillfreeze /animateTransform animateTransform attributeNametransform attributeTypeXML typescale dur6s values1;1;1.3 keyTimes0;0.5;1 fillfreeze/animateTransform animateTransform attributeNametransform attributeTypeXML typetranslate dur9s values0;0;300 7 keyTimes0;0.6;0.9 fillfreeze/animateTransform /circle line x1650 y1300 x2650 y2600 stroke-width20 strokeblue stroke-linecapround animateTransform attributeNametransform attributeTypeXML typetranslate dur9s values0;0;0 800 keyTimes0;0.6;1 fillfreeze/animateTransform /line /svg/div
/* xxx.css */.container { flex-direction: column; align-items: center; width: 100%; height: 100%; background-color: #F1F3F5;}
