Silverlight interrompt l'animation JQuery

Question

J'ai une page HTML qui contient deux éléments principaux. L'une est une carte Silverlight (avec des punaises animées) et l'autre est une animation jQuery. Lorsque la carte Silverlight contient beaucoup de punaises, l'animation jQuery est très agitée. Existe-t-il un moyen de réduire le nombre de ressources de Silverlight et d'accorder une plus grande priorité à l'animation jQuery?

Answer 1

Vous pouvez accélérer le framerate des applications Silverlight en ajoutant le paramètre MaxFrameRate à la balise d'objet: -

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

Cela peut libérer le processeur pour gérer les animations JQuery.

Answer 2

J'ai un contrôle de carte personnalisé qui est un wrapper autour du contrôle de la carte Silverlight Bing. J'ai récupéré des données sur les positions des véhicules à partir d'un service Web. Je puis ajouter un autre contrôle personnalisé à une couche de carte pour chaque véhicule ... comme ceci:

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

La classe « VehicleMarker » a ce style:

<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> 

J'ai surchargé l' ' « méthode sur le « OnApplyTemplate VehicleMarker » de sorte qu'une fois que le modèle a été appliqué, une animation est ajoutée au contrôle le cas échéant:

 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(); 

Je soupçonne que son l'animation et le nombre d'icônes t Le chapeau est ajouté à la carte qui est le problème. Si j'arrête toutes les animations, les performances s'améliorent. Ce n'est pas génial, mais c'est nettement mieux.

Le jQuery pour animer un autre élément sur la même page que la carte silverlight ressemble à ceci:

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'); 
      } 
     }