我正在使用间隔方法来转换时钟的手。时钟在Firefox中正常工作，但在Chrome和IE中没有。
此外，控制台上没有错误。但转换属性似乎是及时更新的，但是ui没有得到更新。
**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'
}
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();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;
}
我不知道自己错过了什么。任何帮助将不胜感激。
答案 0 :(得分：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>