文章/答案/技术大牛

发布

社区首页 >专栏 >【HarmonyOS之旅】基于ArkTS开发(三) -＞兼容JS的类Web开发(六) -＞ CSS动画

【HarmonyOS之旅】基于ArkTS开发(三) -＞兼容JS的类Web开发(六) -＞ CSS动画

枫叶丹

发布于 2025-02-27 00:33:23

17300

代码可运行

文章被收录于专栏：C++C++

运行总次数：0

代码可运行

1 -> 属性样式动画

在关键帧(Keyframes)中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。

<!-- test.hml -->
<div class="container">
  <div class="fade">
    <text>fading away</text>
  </div>
  <div class="bigger">
    <text>getting bigger</text>
  </div>
</div>

/* test.css */
.container {
  background-color:#F1F3F5;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.fade{
  width: 30%;
  height: 200px;
  left: 35%;
  top: 25%;
  position: absolute;
  animation: 2s change infinite friction;
}
.bigger{
  width: 20%;
  height: 100px;
  background-color: blue;
  animation: 2s change1 infinite linear-out-slow-in;
}
text{
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  font-size: 35px;
  animation: 2s change2 infinite linear-out-slow-in;
}
/* 颜色变化 */
@keyframes change{
  from {
    background-color: #f76160;
    opacity: 1;
  }
  to {
    background-color: #09ba07;
    opacity: 0;
  }
}
/* 父组件大小变化 */
@keyframes change1{
  0% {
    width: 20%;
    height: 100px;
  }
  100% {
    width: 80%;
    height: 200px;
  }
}  
/* 子组件文字缩放 */
@keyframes change2{
  0%{
   transform: scale(0);
  }
  100% {
    transform: scale(1.5);
  }
}

说明

animation取值不区分先后，duration(动画执行时间)/delay(动画延迟执行时间)按照出现的先后顺序解析。
必须设置animation-duration样式，否则时长为0则不会有动画效果。当设置animation-fill-mode属性为forwards时，组件直接展示最后一帧的样式。

2 -> transform样式动画

设置transform属性对组件进行旋转、缩放、移动和倾斜。

2.1 -> 设置静态动画

创建一个正方形并旋转90°变成菱形，并用下方的长方形把菱形下半部分遮盖形成屋顶，设置长方形translate属性值为(150px,-150px)确定坐标位置形成门，再使用position属性使横纵线跟随父组件(正方形)移动到指定坐标位置，接着设置scale属性使父子组件一起变大形成窗户大小，最后使用skewX属性使组件倾斜后设置坐标translate(200px,-710px)得到烟囱。

<!-- test.hml -->
<div class="container">
  <div class="top"></div>
  <div class="content"></div>
  <div class="door"></div>
  <!-- 窗户 -->
  <div class="window">
    <div class="horizontal"></div>
    <div class="vertical"></div>
  </div>
  <div class="chimney"></div>
</div>

/* test.css */
.container {
  width:100%;
  height:100%;
  background-color:#F1F3F5;
  align-items: center;
  flex-direction: column;
}
.top{
  z-index: -1;
  position: absolute;
  width: 428px;
  height: 428px;
  background-color: #860303;
  transform: rotate(45deg);
  margin-top: 284px;
  margin-left: 148px;
}
.content{
  margin-top: 500px;
  width: 600px;
  height: 400px;
  background-color: white;
  border:  1px solid black;
}
.door{
  width: 100px;
  height: 150px;
  background-color: #1033d9;
  transform: translate(150px,-137px);
}
.window{
  z-index: 1;
  position: relative;   
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  transform: translate(-150px,-400px) scale(1.5);
}
/* 窗户的横轴 */
.horizontal{
  position: absolute;
  top: 50%;
  width: 100px;
  height: 5px;
  background-color: black;
}
/* 窗户的纵轴 */
.vertical{
  position: absolute;
  left: 50%;
  width: 5px;
  height: 100px;
  background-color: black;
}
.chimney{
  z-index: -2;
  width: 40px;
  height: 100px;
  border-radius: 15px;
  background-color: #9a7404;
  transform: translate(200px,-710px) skewX(-5deg);
}

2.2 -> 设置平移动画

小球下降动画，改变小球的Y轴坐标实现小球下落，在下一段是时间内减小Y轴坐标实现小球回弹，让每次回弹的高度逐次减小直至回弹高度为0，就模拟出了小球下降的动画。

<!-- test.hml -->
<div class="container">
  <div class="circle"></div>
  <div class="flower"></div>
</div>

/* test.css */
.container {
  width:100%;
  height:100%;
  background-color:#F1F3F5;
  display: flex;
  justify-content: center;
}
.circle{
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background-color: red;
  /* forwards停在动画的最后一帧 */
  animation: down 3s fast-out-linear-in forwards;
}
.flower{
  position: fixed;
  width: 80%;
  margin-left: 10%;
  height: 5px;
  background-color: black;
  top: 1000px;
}
@keyframes down {
  0%{
    transform: translate(0px,0px);
  }
  /* 下落 */
  15%{
    transform: translate(10px,900px);
  }
  /* 开始回弹 */
  25%{
    transform: translate(20px,500px);
  }
  /* 下落 */
  35%{
    transform: translate(30px,900px);
  }
  /* 回弹 */
  45%{
    transform: translate(40px,700px);
  }
  55%{
    transform: translate(50px,900px);
  }
  65%{
    transform: translate(60px,800px);
  }
  80%{
    transform: translate(70px,900px);
  }
  90%{
    transform: translate(80px,850px);
  }
  /* 停止 */
  100%{
    transform: translate(90px,900px);
  }
}

2.3 -> 设置旋转动画

设置不同的原点位置(transform-origin)改变元素所围绕的旋转中心。rotate3d属性前三个参数值分别为X轴、Y轴、Z轴的旋转向量，第四个值为旋转角度，旋转向角度可为负值，负值则代表旋转方向为逆时针方向。

<!-- test.hml -->
<div class="container">
  <div class="rotate">
    <div class="rect rect1"></div>
    <div class="rect rect2"></div>
    <div class="rect rect3"></div>
  </div>
  <!-- 3d属性 -->
  <div class="rotate3d">
    <div class="content">
        <div class="rect4"></div>
        <div class="rect5"> </div>
    </div>
    <div class="mouse"></div>
  </div>
</div>

/* test.css */
.container {
  flex-direction: column;
  background-color:#F1F3F5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rect{
  width: 100px;
  height: 100px;
  animation: rotate 3s infinite;
  margin-left: 100px;
}
.rect1{
  background-color: #f76160;
}
.rect2{
  background-color: #60f76f;
  /* 改变原点位置*/
  transform-origin: 10% 10px;
}
.rect3{
  background-color: #6081f7;
  /*  改变原点位置*/
  transform-origin: right bottom;
}
@keyframes rotate {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg);
  }
}
/* 3d示例样式 */
.rotate3d{
  margin-top: 150px;
  flex-direction: column;
  background-color:#F1F3F5;
  display: flex;
  align-items: center;
  width: 80%;
  height: 600px;
  border-radius: 300px;
  border: 1px solid #ec0808;
}
.content{
  padding-top: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* react4 react5 翻转形成眼睛 */
.rect4{
  width: 100px;
  height: 100px;
  animation: rotate3d1 17ms infinite;
  background: linear-gradient(#e6c4ec, #be15d9)
}
.rect5{
  width: 100px;
  height: 100px;
  animation: rotate3d1 17ms infinite;
  margin-left: 100px;
  background: linear-gradient(#e6c4ec, #be15d9)
}
.mouse{
  margin-top: 150px;
  width: 200px;
  height: 100px;
  border-radius: 50px;
  border: 1px solid #e70303;
  animation: rotate3d2 17ms infinite;
}
/* 眼睛的动效 */
@keyframes rotate3d1{
  0% {
    transform:rotate3d(0,0,0,0deg)
  }
  50% {
    transform:rotate3d(20,20,20,360deg);
  }
  100% {
    transform:rotate3d(0,0,0,0deg);
  }
}
/* 嘴的动效 */
@keyframes rotate3d2{
  0% {
    transform:rotate3d(0,0,0,0deg)
  }
  33% {
    transform:rotate3d(0,0,10,30deg);
  }
  66% {
    transform:rotate3d(0,0,10,-30deg);
  }
  100% {
    transform:rotate3d(0,0,0,0deg);
  }
}

说明

transform-origin变换对象的原点位置，如果仅设置一个值，另一个值为50%，若设置两个值第一个值表示X轴的位置，第二个值表示Y轴的位置。

2.4 -> 设置缩放动画

设置scale样式属性实现涟漪动画，先使用定位确定元素的位置，确定坐标后创建多个组件实现重合效果，再设置opacity属性改变组件不透明度实现组件隐藏与显示，同时设置scale值使组件可以一边放大一边隐藏，最后设置两个组件不同的动画执行时间，实现扩散的效果。

设置sacle3d中X轴、Y轴、Z轴的缩放参数实现动画。

<!-- test.hml -->
<div class="container">
  <div class="circle">
    <text>ripple</text>
  </div>
  <div class="ripple"></div>
  <div class="ripple ripple2"></div>
  <!-- 3d -->
  <div class="content">
    <text>spring</text>
  </div>
</div>

/* test.css */
.container {
  flex-direction: column;
  background-color:#F1F3F5;
  width: 100%;
  position: relative;
}
.circle{
  margin-top: 400px;
  margin-left: 40%;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background:linear-gradient(#dcaec1, #d3a8e3);
  z-index: 1;  position: absolute;
}
.ripple{
  margin-top: 400px;
  margin-left: 40%;
  position: absolute;  z-index: 0;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  background:linear-gradient(#dcaec1,#d3a8e3);
  animation: ripple 5s infinite;
}
/* 设置不同的动画时间 */
.ripple2{
  animation-duration: 2.5s;
}
@keyframes ripple{
  0%{
    transform: scale(1);
    opacity: 0.5;
  }
  50%{
    transform: scale(3);
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 0.5;
  }
}
text{
  color: white;
  text-align: center;
  height: 100%;
  width: 100%;
}
.content {
  margin-top: 700px;
  margin-left: 33%;
  width: 200px;
  height: 100px;
  animation:rubberBand 1s infinite;
  /* 设置渐变色 */
  background:linear-gradient(#e276aa,#ec0d66);
  position: absolute;
}
@keyframes rubberBand {
  0% {
    transform: scale3d(1, 1, 1);
  }
  30% {
    transform: scale3d(1.25, 0.75, 1.1);
  }
  40% {
    transform: scale3d(0.75, 1.25, 1.2);
  }
  50% {
    transform: scale3d(1.15, 0.85, 1.3);
  }
  65% {
    transform: scale3d(.95, 1.05, 1.2);
  }
  75% {
    transform: scale3d(1.05, .95, 1.1);
  }
  100%{
    transform: scale3d(1, 1, 1);
  }
}

说明

设置transform属性值后，子元素会跟着父元素一起改变，若只改变父元素其他属性值时(如：height，width)，子元素不会改变。

2.5 -> 设置matrix属性

matrix是一个入参为六个值的矩阵，6个值分别代表：scaleX, skewY, skewX, scaleY, translateX, translateY。下面示例中设置了matrix属性为matrix(1,0,0,1,0,200)使组件移动和倾斜。

<!-- test.hml -->
<div class="container">
  <div class="rect"> </div>
</div>

/* test.css */
.container{
  background-color:#F1F3F5;
  display: flex;
  justify-content: center;
}
.rect{
  width: 100px;
  height: 100px;
  background-color: red;
  animation: down 3s infinite forwards;
}
@keyframes down{
  0%{
    transform: matrix(1,0,0,1,0,0);
  }
  10%{
    transform: matrix(1,0,0,1,0,200);
  }
  60%{
    transform: matrix(2,1.5,1.5,2,0,700);
  }
  100%{
    transform: matrix(1,0,0,1,0,0);
  }
}

2.6 -> 整合transform属性

transform可以设置多个值并且多个值可同时设置，下面案例中展示同时设置缩放(scale)，平移(translate)，旋转(rotate)属性时的动画效果。

<!-- test.hml -->
<div class="container">
  <div class="rect1"></div>
  <div class="rect2"></div>
  <div class="rect3"></div>
  <div class="rect4"></div>
  <div class="rect5"></div>
</div>

/* test.css */
.container{
  flex-direction:column;
  background-color:#F1F3F5;
  padding:50px;
}
.rect1{
  width: 100px;
  height: 100px;
  background:linear-gradient(#e77070,#ee0202);
  animation: change1 3s infinite forwards;
}
.rect2{
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background:linear-gradient(#95a6e8, #2739de);
  animation: change2 3s infinite forwards;
}
.rect3{
  margin-top: 50px;
  width: 100px;
  height: 100px;
  background:linear-gradient(#142ee2, #8cb1e5);
  animation: change3 3s infinite;
}
.rect4{
  align-self: center;
  margin-left: 50px;
  margin-top: 200px;
  width: 100px;
  height: 100px;
  background:linear-gradient(#e2a8df, #9c67d4,#8245d9,#e251c3);
  animation: change4 3s infinite;
}
.rect5{
  margin-top: 300px;
  width: 100px;
  height: 100px;
  background:linear-gradient(#e7ded7, #486ccd, #94b4d2);
  animation: change5 3s infinite;
}
/* change1 change2 对比 */
@keyframes change1{
  0%{
    transform: translate(0,0);    transform: rotate(0deg)
  }
  100%{
    transform: translate(0,500px);
    transform: rotate(360deg)
  }
}
/* change2 change3 对比属性顺序不同的动画效果 */
@keyframes change2{
  0%{
    transform:translate(0,0) rotate(0deg) ;
  }
  100%{
    transform: translate(300px,0) rotate(360deg);
  }
}
@keyframes change3{
  0%{
    transform:rotate(0deg) translate(0,0);
  }
  100%{
    transform:rotate(360deg)  translate(300px,0);
  }
}
/* 属性值不对应的情况 */
@keyframes change4{
  0%{
    transform: scale(0.5);
  }
  100%{
    transform:scale(2) rotate(45deg);
  }
}
/* 多属性的写法 */
@keyframes change5{
  0%{
    transform:scale(0) translate(0,0) rotate(0);
  }
  100%{
    transform: scale(1.5) rotate(360deg) translate(200px,0);
  }
}

说明

当设置多个transform时，后续的transform值会把前面的覆盖掉。若想同时使用多个动画样式可用复合写法，例：transform: scale(1) rotate(0) translate(0,0)。
transform进行复合写法时，变化样式内多个样式值顺序的不同会呈现不一样的动画效果。
transform属性设置的样式值要一一对应，若前后不对应，则该动画不生效。若设置多个样式值则只会呈现出已对应值的动画效果。

3 -> background-position样式动画

通过改变background-position属性(第一个值为X轴的位置，第二个值为Y轴的位置)移动背景图片位置，若背景图位置超出组件则超出部分的背景图不显示。

<!-- test.hml -->
<div class="container">
  <div class="content"></div>
  <div class="content1"></div>
</div>

/* test.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;
  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组件添加动画效果。

4.1 -> 属性样式动画

在Svg的子组件animate中，通过attributeName设置需要进行动效的属性，from设置开始值，to设置结束值。

<!-- test.hml -->
<div class="container">
  <svg>
    <text x="300" y="300" fill="blue">
      Hello
      <animate attributeName="font-size" from="30" to="60" dur="3s" repeatCount="indefinite">
      </animate>
      <animate attributeName="fill" from="red" to="blue" dur="3s" repeatCount="indefinite">
      </animate>
      <animate attributeName="opacity" from="1" to="0.3" dur="3s" repeatCount="indefinite">
      </animate>
    </text>
    <text x="300" y="600" fill="blue">
      World
      <animate attributeName="font-size" from="30" to="60" values="30;80" dur="3s" repeatCount="indefinite">
      </animate>
      <animate attributeName="fill" from="red" to="blue"  dur="3s" repeatCount="indefinite">
      </animate>
      <animate attributeName="opacity" from="0.3" to="1" dur="3s" repeatCount="indefinite">
      </animate>
    </text>
  </svg>
</div>

说明

在设置动画变化值时，如果已经设置了values属性，则from和to都失效。

4.2 -> 路径动画

在Svg的子组件animateMotion中，通过path设置动画变化的路径。

<!-- test.hml -->
<div class="container">
  <svg fill="white" width="800" height="900">
    <path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="white" stroke="blue" stroke-width="5" >
    </path>
    <path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z"  >
      <animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="M300,200 h-150 a150 150 0 1 0 150 -150 z">
      </animateMotion>
    </path>
  </svg>
</div>

4.3 -> animateTransform动画

在Svg的子组件animateTransform中，通过attributeName绑定transform属性，type设置动画类型，from设置开始值，to设置结束值。

<!-- test.hml -->
<div class="container" style="">
  <svg>
    <line x1="90" y1="300" x2="90" y2="730" stroke-width="10" stroke="black" stroke-linecap="round">
      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" 
      fill="freeze">
      </animateTransform>
    </line>
    <circle cx="500" cy="500" r="50" stroke-width="15" fill="red" stroke="#e70d0d">
      <animateTransform attributeName="transform" attributeType="XML" type="rotate"  dur="3s" values="0;30;10;30;20;30;25;30" keyTimes="0;0.3;0.5;0.7;0.8;0.9;1.0;1.1" fill="freeze">
      </animateTransform>
      <animateTransform attributeName="transform" attributeType="XML" type="scale"  dur="6s" values="1;1;1.3" keyTimes="0;0.5;1" fill="freeze"></animateTransform>
      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="9s" values="0;0;300 7" keyTimes="0;0.6;0.9" fill="freeze"></animateTransform>
    </circle>
    <rect width="500" height="200" x="90" y="840">
      <animateTransform attributeName="transform" attributeType="XML" type="skewY"  dur="6s" values="0;0;30" keyTimes="0;0.5;1" fill="freeze"></animateTransform>
    </rect>
    <line x1="650" y1="300" x2="650" y2="600" stroke-width="20" stroke="blue" stroke-linecap="round">
      <animateTransform attributeName="transform" attributeType="XML" type="translate"  dur="9s" values="0;0;0 800" keyTimes="0;0.6;1" fill="freeze"></animateTransform>
    </line>
  </svg>
</div>

/* test.css */
.container {
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: #F1F3F5;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-02-26，如有侵权请联系 cloudcommunity@tencent.com 删除

动画

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

5605

Go 开发者必备：Protocol Buffers 入门指南

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

3419

60页PPT全解：DeepSeek系列论文技术要点整理

4754

腾讯云分布式数据库（DCDB）

数据库

苏强

2017/05/12

3.8K0

腾讯云分布式数据库 DCDB 架构解密

数据库云数据库 SQL Server

文章主要介绍了分布式数据库在金融互联网场景下的设计和实现，包括DCDB的架构、基础环境、实例配置、功能、性能、以及扩展性。同时，还探讨了分布式数据库在云原生架构下的应用和挑战，以及TDSQL在金融云上的解决方案和案例。

胡彬

2017/06/23

4K0

腾讯分布式数据库TDSQL金融级能力的架构原理解读

TDSQL MySQL 版

为帮助开发者更好地了解和学习分布式数据库技术，2020年3月，腾讯云数据库、云加社区联合腾讯TEG数据库工作组特推出为期3个月的国产数据库专题线上技术沙龙《你想了解的国产数据库秘密，都在这！》，邀请数十位鹅厂资深数据库专家每周二和周四晚上在线深入解读TDSQL、CynosDB/CDB、TBase三款鹅厂自研数据库的核心架构、技术实现原理和最佳实践等。三月为TDSQL专题月，本文将带来直播回顾第一篇《腾讯自研分布式数据库TDSQL核心架构及特性拆解》。

分布式数据库TDSQL

2020/03/18

6.9K0

分布式数据库选型—数据水平拆分方案

sql

水平拆分的概念随着分布式数据库的推广已为大部分人熟知，分库分表、异构索引、小表广播、这些功能几乎是产品功能需求标配。然而有些客户使用分布式数据库后的体验不尽如意。本文尝试从数据的角度总结分布式数据的复制（replication）和分区（partition）技术原理和方案，其中分区也有称为分片（sharding），希望能引起读者一些思考，在分布式数据库选型中能注意这些细节的区别，选择适合业务的数据水平拆分方案。

用户1278550

2019/06/20

1.4K0

TDSQL TCA 分布式实例特点初探--分布表和SQL透传

分布式 c++数据库云数据库 SQL Server TDSQL MySQL 版

TDSQL分布式实例通过Proxy接口提供和mysql兼容的连接方式，用户通过IP地址、端口号以及用户名、密码进行连接：

用户7689089

2020/11/13

2K0

一文教你迅速解决分布式事务 XA 一致性问题

数据库分布式

文章主要介绍了腾讯云分布式数据库DCDB的一些特性、架构、以及业务价值。DCDB可支持大容量、高并发的业务需求，同时具备高可用性、高性能、以及更优的TCO。在架构上，DCDB采用了全冗余、全解耦的设计，保证了高可用性。此外，DCDB还具备弹性扩展的能力，能够根据业务的需求自动调整计算资源。通过这些特性，DCDB能够满足金融行业对数据库的各种需求，包括高并发、高可用、高稳定性、以及低成本。

腾讯云数据库团队

2017/09/01

4.2K0

浅谈分布式数据库

分布式数据库云数据库 SQL Server 开源 jdbc

文章集中整理总结mysql分库分表开源产品，分布式数据库的设计，以及实际应用案例等相关内容，部分附上本文作者实际应用过程中的理解。

庞小明

2018/09/19

3.7K0

干货分享 | 2分钟看懂MySQL分库分表原理

数据库 sql

点击上方蓝字关注我们吧作者简介：董泽锋，腾讯云数据库研发工程师，主要负责腾讯云TDSQL研发工作。 ---- 【导语】随着业务的增长，mysql中保存的数据会越来越多。此时，数据库很容易成为系统性能的一个瓶颈，单机存储容量、IO、CPU处理能力都有限，当单表的数据量达到1000W或100G以后，库表的增删改查操作面临着性能大幅下降的问题。分库分表是一种解决办法。分库分表实际上就是对数据进行切分。我们一般可以将数据切分分为两种方式：垂直（纵向）切分和水平（横向）切分。垂直切分垂直切分常见有垂直分

腾讯云数据库 TencentDB

2019/05/23

5.7K0

用分布式技术轻松化解数据库容量和性能瓶颈

数据库

腾讯云数据库团队

2017/06/27

4.3K1

大型分布式业务平台数据库优化方法（下）

数据库

文章摘要：当单表数据达到千万以上时，通过加索引或者表分区优化提升的效果就比较有限了，应该如何应对呢？？？

用户2991389

2018/09/05

1.1K0

使用分布式数据库，还需要考虑做分库分表吗？

数据库存储分布式集群数据

随着数据存储需求的不断增加，分布式数据库成为了处理大规模数据的一种重要方式。分布式数据库可以将数据分散到多个计算节点上，并利用分布式计算的能力来提高数据处理的效率和可用性。然而，在使用分布式数据库的过程中，是否需要进行分库分表呢？

coderidea

2023/08/10

1.2K0

腾讯会议核心数据库TDSQL，如何做到快速无损在线扩容？

TDSQL-C MySQL 版

自去年12月底发布后，腾讯会议40天更新14个版本，8天紧急扩容超过10万台云主机，投入的计算资源超100万核。疫情复工期间，每周都有数万家企业和政府相关机构使用腾讯会议复工复产，通过腾讯会议开拓了云签约、云招标、云面试、云培训等云上协同场景。

腾讯云开发者

2020/05/08

3.2K0

聊聊分布式数据库TDSQL的技术架构

数据库存储分布式行业架构

咱们很多读者都是在互联网公司工作，大部分同学会有一种认知偏差，总以为互联网的业务对技术的要求是最高的。但其实不然。

开发内功修炼

2023/12/11

2.2K0

聊聊主流的分布式数据库

nosql TDSQL MySQL 版分布式 postgresql sql

单体数据库时代，随着系统交易量的不断上升，数据库读写性能出现了严重下降。我们可以借助分库分表中间件，比如mycat、shardingjdbc来实现分库分表，缓解单库的读写性能。但是分库分表中间件并不支持事务，如果要保证数据一致性，就需要借助于分布式事务中间件，比如阿里巴巴的seata。后来分布式数据库逐渐成为解决数据一致性的选择，目前分布式数据库产品已经比较成熟，支持ACID事务，本文就来聊一聊分布式数据库。

jinjunzhu

2021/01/05

1.9K0

电商月将至，腾讯云DCDB助力电商企业应对支付洪峰

数据库云数据库 SQL Server

腾讯云开发者社区

2017/10/24

3.4K0

腾讯云数据库产品介绍

数据库云数据库 SQL Server 云数据库 Redis®postgresql

腾讯云上有许多种数据库产品，本文简单介绍每种产品的介绍，特性，应用场景等，帮助各位根据业务需要选择最适合的数据库。

scarlett学习手册

2019/12/12

12.7K0

mysql分布式数据库的逻辑库、物理库和分库分表和TDDL图文详解

数据库解决方案数据迁移数据库 sql

逻辑库/逻辑文件：给用户看的（即Database和Table就是我们常说的逻辑库的范畴）物理库/物理文件：存储在计算机中的（即机器和Port就是我们常说的物理库的范畴。）

一个会写诗的程序员

2020/04/24

4.9K0

简单明了！OLTP场景下的数据分布式设计原则

分布式数据库 sql 云数据库 SQL Server 数据迁移

温卫斌，就职于中国民生银行信息科技部，目前负责分布式技术平台设计与研发，主要关注分布式数据相关领域。

Spark学习技巧

2021/03/05

8140

中欧财富：分布式数据库的应用历程和 TiDB 7.1 新特性探索

数据库 tidb

中欧财富是中欧基金控股的销售子公司，旗下 APP 实现业内基金品种全覆盖，提供基金交易、大数据选基、智慧定投、理财师咨询等投资工具及服务。中欧财富致力为投资者及合作伙伴提供一站式互联网财富管理解决方案，自 2015 年成立以来业务持续保持稳健的增长。

PingCAP

2023/08/30

2920

数据库中间件

其他

作者：[美]威廉·肯尼迪（William Kennedy）布赖恩·克特森（Brian

李海彬

2018/07/26

2.7K0