ASP.NET의 애니메이션

웹 응용 프로그램에서 선을 애니메이션으로 표시해야하는 작업을 완료하는 데 어려움이 있습니다.ASP.NET의 애니메이션

라인 데이터는 데이터베이스에 저장되며 x, y 및 시간 정보로 구성됩니다. x 및 y 좌표는 그려진 점의 위치를 지정하는 반면 time은 해당 점의 시간 소인 (밀리 초)을 나타냅니다. 예컨대

, 포인트 1 포인트 2 (X = 10, Y 23 = t (152) =) 포인트 3 (X = 15, Y = 20 (X = 21, Y 29 = t는 385 =) , t = 506) ... ...

따라서 작업은 지정된 타임 스탬프를 기반으로 웹 앱에 이러한 지점을 표시하는 것입니다.

내 문제는 먼저 어떤 종류의 그래픽 플러그 인을 사용하고 어떻게 구현해야하는지 (즉, 타이머를 사용하는 방법, 애니메이션을 수행하는 방법 등) 무엇인지 알지 못합니다.

나는 당신의 도움을 주셔서 감사합니다! 이 작업에 대한 추가 정보가 필요하면 알려 주시기 바랍니다. 나는 기꺼이 그것을 제공 할 것이다.

종류와 관련, 프리다

출처

2012-11-10 Frida

은 내가 이런 일에 대한 Raphaël를 사용합니다 생각합니다. 사용하기 쉽고 모든 주요 브라우저를 지원합니다. 애니메이션 선 그리기는 각 단계를 별도의 경로로 생성해야하기 때문에 다소 번거로울 수 있지만 어렵지 않아야합니다. 여기

은 아주 간단한 예를

var points = [ 
    { x: 0, y: 0, t: 0 }, 
    { x: 100, y: 230, t: 1520 }, 
    { x: 210, y: 290, t: 3850 }, 
    { x: 150, y: 200, t: 5060 }, 
]; 

var paths = []; 

// build paths 
points.forEach(function (p, idx) { 
    if (idx === 0) { 
     paths.push('M ' + p.x + ' ' + p.y); 
    } else { 
     paths.push(paths[idx - 1] + ' L ' + p.x + ' ' + p.y); 
    } 
}); 

var paper = Raphael(10, 10, 300, 300); 
var line = paper.path(paths[0]); 

var next = 1; 

function animate() { 
    if (paths[next]) { 
     duration = points[next].t - points[next - 1].t   
     line.animate({ path: paths[next] }, duration, 'linear', animate); 
     next++; 
    } 
} 
animate();

입니다 그리고 여기 당신이 행동에서 볼 수있는 바이올린입니다 : 위의 사용 완전한 HTML 페이지 http://jsfiddle.net/toxicsyntax/FLPdr/ UPDATE 여기

한다 암호. 그것은 여전히 단순한 예이지만 그 길에서 일할 수 있어야합니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Raphael Play</title> 
     <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script> 
     <script type="text/javascript"> 
      function drawLine(points) { 

       var paths = ['M ' + points[0].x + ' ' + points[0].y]; 

       // build paths 
       for (var i = 1; i < points.length; i++) { 
        var p = points[i]; 
        paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y); 
       } 

       // get drawing surface 
       var paper = new Raphael(document.getElementById('canvas_container'), 500, 500); 

       // draw line 
       var line = paper.path(paths[0]); 
       var next = 1; 

       function animate() { 
        if (paths[next]) { 
         duration = points[next].t - points[next - 1].t   
         line.animate({ path: paths[next] }, duration, 'linear', animate); 
         next++; 
        } 
       } 
       animate(); 
      } 
     </script> 
     <style type="text/css"> 
      #canvas_container { 
       width: 500px; 
       border: 1px solid #aaa; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas_container"></div> 
     <script type="text/javascript"> 
      window.onload = function() { 
       // the points here should be generated by your ASP.NET application 
       drawLine([ 
        // the points here should be generated by your ASP.NET application 
        { x: 0, y: 0, t: 0 }, 
        { x: 100, y: 230, t: 1520 }, 
        { x: 210, y: 290, t: 3850 }, 
        { x: 150, y: 200, t: 5060 }, 
       ]); 
      } 
     </script> 
    </body> 
</html>

포인트는 HTML 페이지의 끝에 있으며, 응용 프로그램에서 모델에서 생성 할 수 있습니다.

출처

2012-11-10 11:55:38 AHM

의견을 보내 주셔서 감사합니다. 이것은 분명 나에게 유용 할 것이다. 그러나 웹 개발에 익숙하지 않아서 라파엘로 간단한 예제를 실행하려했지만 불행하게도 성공하지 못했습니다. 따라서 가능한 경우 코드를 실행할 수있는 방법을 전체 사례를보고 하시려면 친절하게 요청하십시오. 친절한 분, 프리다! – Frida

내 코드를 사용하는 html 예제를 추가했습니다. Raphael에 대한 소개는이 답변의 범위를 벗어나는 것 같지만, 원한다면이 내용을 살펴보십시오. http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to -the-raphael-js-library/ – AHM

고마워요!/Frida – Frida

ASP.NET의 애니메이션

답변

관련 문제