如何通过AngularJS动态修改<circle>元素的动画时长

问题背景 #

我开发了一款可自定义时长的网页倒计时应用，为提升可视化效果，给倒计时添加了环绕的动画圆环，动画时长需与倒计时时长匹配。目前静态设置300s的动画运行正常，已有计算所需秒数的函数，想通过AngularJS将静态的300s替换为动态计算的时长值。

当前HTML代码：

<mat-card-content class="timerTime">
    <svg width="200" height="200">
        <circle id="timer1circle" class="circle" cx="100" cy="100" r="80" style="animation: 300s circletimer linear"/>
    </svg>
    <span class="timer-text">{{timer1Rest}}</span>
</mat-card-content>

当前CSS代码：

@keyframes circletimer {
  from {
    stroke-dashoffset: 500;
    stroke-dasharray: 500;
  }
  to {
    stroke-dashoffset: 0;
    stroke-dasharray: 500;
  }
}

svg {
  background-color: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: transparent;
  transform: translate(-50%, -50%) rotateZ(-90deg);
}

.circle {
  stroke: rgba(226, 149, 120, 1);
  stroke-width: 16;
  fill: transparent;
  stroke-dashoffset: 500;
  stroke-dasharray: 0;
  animation: 300s circletimer linear;
}

.timer-text {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #006D77;
  font-size: 42px;
  font-weight: 700;
}

实现步骤 #

• 1. 控制器中定义动态时长变量
  在AngularJS控制器里，将计算好的时长赋值给作用域变量，格式要带s单位：

angular.module('yourTimerApp', [])
.controller('TimerCtrl', function($scope) {
  // 替换成你实际的时长计算函数
  function getTimerDuration() {
    // 示例：返回用户自定义的秒数
    return 240; // 4分钟=240秒
  }

  // 初始化动态时长
  $scope.dynamicDuration = getTimerDuration() + 's';
});

• 2. HTML中绑定动态动画属性
  把静态的300s替换为AngularJS表达式绑定，同时移除CSS中.circle类的静态动画声明（避免样式冲突）：
  修改后的HTML：

<mat-card-content class="timerTime" ng-controller="TimerCtrl">
    <svg width="200" height="200">
        <circle id="timer1circle" class="circle" cx="100" cy="100" r="80" style="animation: {{dynamicDuration}} circletimer linear"/>
    </svg>
    <span class="timer-text">{{timer1Rest}}</span>
</mat-card-content>

修改后的.circle CSS：

.circle {
  stroke: rgba(226, 149, 120, 1);
  stroke-width: 16;
  fill: transparent;
  stroke-dashoffset: 500;
  stroke-dasharray: 0;
  /* 移除原有的静态动画声明 */
}

• 3. 支持中途更新时长（可选）
  如果需要允许用户中途修改倒计时时长，可在控制器中添加更新逻辑，同时重新触发动画：

$scope.updateDuration = function(newSeconds) {
  $scope.dynamicDuration = newSeconds + 's';
  // 重新触发动画：先移除类再添加
  const circle = document.getElementById('timer1circle');
  circle.classList.remove('circle');
  // 用$timeout确保DOM更新后再添加类
  $timeout(() => circle.classList.add('circle'));
};

内容的提问来源于stack exchange，提问作者sumisu