Silverlight中断JQuery动画

Question

我有一个包含两个主要元素的HTML页面。一个是Silverlight地图（带有动画图钉），另一个是jQuery动画。

当silverlight地图包含很多图钉时，jQuery动画非常不连贯。有什么办法可以让Silverlight变得更少资源，让jQuery动画具有更高的优先级？

Answer 1

您可以通过添加MaxFrameRate参数object标签的油门Silverlight应用程序的帧率： -

<object ...> 
    ... 
    <param name="maxframerate" value="15 /> 
</object> 

这可以腾出CPU来处理JQuery的动画。

Answer 2

我有一个自定义的Map控件，它是Silverlight Bing地图控件的一个包装。我从Web服务中检索有关车辆位置的数据。然后我添加另一个自定义控制地图图层每辆车......像这样：

VehicleMarker vehicleMarker = new VehicleMarker(marker); 
    markerLayer.AddChild(vehicleMarker, new Location(vehicleMarker.Location.Latitude, vehicleMarker.Location.Longitude)); 

的“VehicleMarker”类有这种风格：

<Style x:Name="VehicleMarkerStyle" TargetType="Controls:VehicleMarker" > 
     <Setter Property="RenderTransformOrigin" Value="0.5,0.5" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="Controls:VehicleMarker" > 
        <Grid> 
         <Grid.RenderTransform> 
          <TransformGroup> 
           <ScaleTransform x:Name="ScaleTransform" ScaleX="1" ScaleY="1" /> 
           <TranslateTransform x:Name="TranslateTransform" X="0" Y="0"/> 
          </TransformGroup> 
         </Grid.RenderTransform> 
         <Image Source="{TemplateBinding IconUrl}" Width="30" Height="30" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

我已经覆盖了“ OnApplyTemplate VehicleMarker‘”上的方法’，使得一旦已应用模板，动画被添加到控制在适当情况下：

 TranslateTransform translateTransform = new TranslateTransform(); 
     ScaleTransform scaleTransform = new ScaleTransform(); 
     TransformGroup transformGroup = new TransformGroup(); 
     transformGroup.Children.Add(translateTransform); 
     transformGroup.Children.Add(scaleTransform); 
     this.RenderTransform = transformGroup; 
     this.RenderTransformOrigin = new Point(0.5, 0.5); 

     var storyboard = new Storyboard(); 
     storyboard.AutoReverse = true; 
     storyboard.RepeatBehavior = RepeatBehavior.Forever; 
     storyboard.Duration = new Duration(new TimeSpan(0,0,0,0,500)); 

     var animation = new DoubleAnimation(); 
     animation.From = translateTransform.Y; 
     animation.To = translateTransform.Y-5; 
     storyboard.Children.Add(animation); 
     Storyboard.SetTargetProperty(animation, new PropertyPath("(UIElement.RenderTransform).(TransformGroup.Children)[0].(TranslateTransform.Y)")); 
     Storyboard.SetTarget(animation, this); 

     if (!Resources.Contains("VehicleBounceAnimation")) 
     { 
      Resources.Add("VehicleBounceAnimation", storyboard); 
     } 

     storyboard.Begin(); 

我怀疑其动画和图标的数目t帽子被添加到地图中是问题所在。如果我停止所有动画，则性能会提高。它不是很好，但它明显更好。

jQuery的动画另一个元素在同一页上的Silverlight的地图看起来是这样的：

function scrollElement(name, timeInSecs) 
     { 
      var elementToScroll = document.getElementById(name); 
      if(elementToScroll!=null) 
      { 
       var jscriptElement = $('#' + name); 

       jscriptElement.animate({ scrollTop: elementToScroll.scrollHeight - elementToScroll.clientHeight }, (timeInSecs - 2) * 1000); 
      } 
      else 
      { 
       window.alert('Cannot find '+name+' to scroll'); 
      } 
     }