Question

我正在使用间隔方法来转换时钟的手。时钟在Firefox中正常工作，但在Chrome和IE中没有。

此外，控制台上没有错误。但转换属性似乎是及时更新的，但是ui没有得到更新。

＆＃13;

**To find duplicate dependencies or its required dependencies, you can visualize library dependencies in tree. Execute gradle command as below.**

run gradlew in Windows as below. 
**gradlew -q dependencies yourProject:dependencies --configuration compile**

The command result will show you human-readable tree hierarchy of all dependencies as below.

compile - Classpath for compiling the main sources.
+--- org.androidannotations:androidannotations-api:3.2
+--- com.android.support:support-annotations:22.1.1
+--- com.squareup:otto:1.3.6
+--- in.srain.cube:grid-view-with-header-footer:1.0.10
+--- com.nostra13.universalimageloader:universal-image-loader:1.9.3
+--- com.github.chrisbanes.photoview:library:1.2.3
+--- org.simpleframework:simple-xml:2.7.1
+--- com.google.android.gms:play-services-base:6.5.+ -> 6.5.87
+--- project :yourProject
|    +--- com.loopj.android:android-async-http:1.4.6
|    +--- org.apache.httpcomponents:httpmime:4.2.5
|    |    \--- org.apache.httpcomponents:httpcore:4.2.4
|    \--- com.google.code.gson:gson:2.3.1
+--- project :facebook
|    \--- com.android.support:appcompat-v7:22.1.1
|         \--- com.android.support:support-v4:22.1.1
|              \--- com.android.support:support-annotations:22.1.1 -> 22.2.0

You can see overriden dependencies and decide in mind which ones should be avoided. 
In above example, last line com.android.support:support-annotations presents overriden from 22.1.1 to 22.2.0 internally.
**To avoid duplicates**,you can add exclude clauses in each project build.gradle file.

compile('com.github.chrisbanes.photoview:library:1.2.3') {
exclude group: 'com.android.support'
}
compile('org.simpleframework:simple-xml:2.7.1') {
    exclude module: 'stax'
    exclude module: 'stax-api'
    exclude module: 'xpp3'
}
compile('com.google.android.gms:play-services-base:6.5.+')
{
        exclude module: 'support-v4'
}

＆＃13;

var clock = document.querySelector('#clock');
var hands = [];
var cx = 110;
var cy = 110;

function init() {
  hands.push(clock.querySelector('#second > *'));
  hands.push(clock.querySelector('#minute > *'));
  hands.push(clock.querySelector('#hour > *'));

  setInterval(function () {
     transformHands();
   }, 1000);
};

function transformHands() {
  var now = new Date();
  var hours = 360 * now.getHours() / 12 + now.getMinutes() / 2;
  var minutes = 360 * now.getMinutes() / 60;
  var seconds = 360 * now.getSeconds() / 60;
  
  hands[0].setAttribute('from', shifter(seconds));
  hands[0].setAttribute('to', shifter(seconds + 360));
  hands[1].setAttribute('from', shifter(minutes));
  hands[1].setAttribute('to', shifter(minutes + 360));
  hands[2].setAttribute('from', shifter(hours));
  hands[2].setAttribute('to', shifter(hours + 360));
}

function shifter(value){
  return [value, cx, cy].join(' ');
}

init();

＆＃13;

body {
  background-color: #eee;
}

div.container {
  border: 5px solid #333;
  display: block;
  width:220px;
  height:220px;
}

svg {
  display: block;
  position: relative;
  width:100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#border {
  stroke: #333;
  stroke-width: 5px;
  fill: #eee;
}

#digits > line {
  stroke: #333;
}

#digits > text {
  fill: #333;
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

#hour {
  stroke: #333;
  stroke-width: 5px;
}

#minute {
  stroke: #333;
  stroke-width: 3px;
}

#second {
  stroke: dodgerblue;
  stroke-width: 2px;
}

#cap {
  stroke: dodgerblue;
  stroke-width: 2px;
  fill: #eee;
}

＆＃13;

我不知道自己错过了什么。任何帮助将不胜感激。

请在此处查看演示https://codepen.io/rkpaswan_in/pen/aqPPVQ

Answer 1

IE / Edge不支持SMIL动画。如果您希望它在IE中工作，则需要使用FakeSmile polyfill。

至于Chrome，我想如果修改属性，它不会更新动画。你应该report that to Chrome。

虽然有一个简单的解决方法。将begin属性设置为"indefinite"

<animateTransform ... begin="indefinite"></animateTransform>

然后在设置属性后启动动画。

hands[0].beginElement();

var clock = document.querySelector('#clock');
var hands = [];
var cx = 110;
var cy = 110;

function init() {
  hands.push(clock.querySelector('#second > *'));
  hands.push(clock.querySelector('#minute > *'));
  hands.push(clock.querySelector('#hour > *'));

  setInterval(function () {
     transformHands();
   }, 1000);
};

function transformHands() {
  var now = new Date();
  var hours = 360 * now.getHours() / 12 + now.getMinutes() / 2;
  var minutes = 360 * now.getMinutes() / 60;
  var seconds = 360 * now.getSeconds() / 60;
  
  hands[0].setAttribute('from', shifter(seconds));
  hands[0].setAttribute('to', shifter(seconds + 360));
  hands[0].beginElement();
  hands[1].setAttribute('from', shifter(minutes));
  hands[1].setAttribute('to', shifter(minutes + 360));
  hands[1].beginElement();
  hands[2].setAttribute('from', shifter(hours));
  hands[2].setAttribute('to', shifter(hours + 360));
  hands[2].beginElement();
}

function shifter(value){
  return [value, cx, cy].join(' ');
}

init();

body {
  background-color: #eee;
}

div.container {
  border: 5px solid #333;
  display: block;
  width:220px;
  height:220px;
}

svg {
  display: block;
  position: relative;
  width:100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#border {
  stroke: #333;
  stroke-width: 5px;
  fill: #eee;
}

#digits > line {
  stroke: #333;
}

#digits > text {
  fill: #333;
  font-size: 12px;
  font-weight: bold;
  text-anchor: middle;
  dominant-baseline: central;
}

#hour {
  stroke: #333;
  stroke-width: 5px;
}

#minute {
  stroke: #333;
  stroke-width: 3px;
}

#second {
  stroke: dodgerblue;
  stroke-width: 2px;
}

#cap {
  stroke: dodgerblue;
  stroke-width: 2px;
  fill: #eee;
}

<div class='container'>
    <svg id='clock' width='220' height='220'>
        <g id='face'>
            <circle id='border' cx='110' cy='110' r='95'></circle>
        </g>
        <g id='digits'>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(30 110 110)'></line>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(60 110 110)'></line>
            <text x='192.5' y='110'>III</text>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(120 110 110)'></line>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(150 110 110)'></line>
            <text x='110' y='192.5'>VI</text>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(210 110 110)'></line>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(240 110 110)'></line>
            <text x='27.5' y='110'>IX</text>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(300 110 110)'></line>
            <line x1='110' y1='22' x2='110' y2='33' transform='rotate(330 110 110)'></line>
            <text x='110' y='27.5'>XII</text>
        </g>
        <g id='hands'>
            <line id='hour' x1='110' y1='110' x2='110' y2='55'>
                <animateTransform attributeName='transform' attributeType='XML' type='rotate' begin="indefinite"></animateTransform>
            </line>
            <line id='minute' x1='110' y1='110' x2='110' y2='44'>
                <animateTransform attributeName='transform' attributeType='XML' type='rotate' begin="indefinite"></animateTransform>
            </line>
            <line id='second' x1='110' y1='110' x2='110' y2='33'>
                <animateTransform attributeName='transform' attributeType='XML' type='rotate' begin="indefinite"></animateTransform>
            </line>
            <circle id='cap' cx='110' cy='110' r='3'></circle>
        </g>
    </svg>
</div>

svg animatetransform在firefox上运行但不在chrome / ie上

1 个答案: