1
イラストレーターで作成した頭蓋骨のラインアートがあります。マウスの位置に応じて線を塗り潰したり消したりしようとしています。私はこれを実現する可能性が二つの方法があるようです：マウスの位置に基づいてラインアートをアニメ化する
私jsfiddleに見られるように線を描画するために怠惰なラインペインタを使用 - http://jsfiddle.net/mwmksa62/、その後のy位置に基づいて、アニメーションのスクラブを持つ方法を見つけます私のマウス（頭蓋骨がビューポートの上部に完全に描画され、マウスが下部にあるときに最初に）
私は必要なものをアニメーション化し、gifを作成します。マウスのy位置（アニメーション最終フレームは、マウスがビューポートの一番上にあるときを示します）
Javascriptを完全に新しくした人として、私はここに正しい方向へ微笑んでいます！
\t /*
\t * Lazy Line Painter - Path Object
\t * Generated using 'SVG to Lazy Line Converter'
\t *
\t * http://lazylinepainter.info
\t * Copyright 2013, Cam O'Connell
\t *
\t */
\t var pathObj = {
\t "skull": {
\t "strokepath": [{
\t "path": "M353.7,637.83c-6.16-4.5-9.9,20.17-10.23,23.19-.48,4.32-2.89,25.95-8.77,30.88s-25,24.62-36,13.43-26.84-29.33-1.21-91.2,35.92-81.3,55.77-90.19",
\t "duration": 600
\t }, {
\t "path": "M351.78,863.86s-.52-63-26.05-61.91S301,860.58,302.09,864.16s6.16-56.58-16.54-55.91-18.2,41.26-18.12,47,2.18-52.57-15.81-52.33c-12.13.16-13.1,43.36-11.21,49.81,0,0-1-46.77-4.64-51.39s-15.27-12-16.48,5.62a186.84,186.84,0,0,0,.42,31.3s-.56-42-2.72-42.35-14.14-8.16-15,7a182,182,0,0,0,.36,26.77s2-41.55-4.56-45.06-11.46-2.55-7.64,14,1.17,13.84,4.48,19.19,5-.79,5-.79-.15,15.83,7.8,18.61,10.77-1.94,14.5,8.26S237.73,854.4,239.7,854s1.69-8.3,1.69-8.3,5,12.35,11.14,12.27,14.27-2.35,14.27-2.35,6.83,12.68,12.5,13,20.29-3.33,20.29-3.33l2.52-.21s2.1-4.71,2.84-2.92,11.58,5.24,20.33.27S333.22,875.08,351.78,863.86Z",
\t "duration": 1300
\t }, {
\t "path": "M191.76,812.79l3.44,23.46s.11,2.17,4.86-.06a4.49,4.49,0,0,0,2.25-6.54s-.63,8.14.79,12.44,7.57,10.49,8.37-5.61c0,0-4.73,15.28,6.7,22.14s2.34-18.07,2.34-18.07l3.54,23.93s.2,5.45,6.67,4.8S236.54,854,236.54,854s-.9,19.49,6.14,21,9.85-17,9.85-17-5.39,27.78,7.54,26,8.1-26,8.1-26-2.59,34.57,15.76,34.33c8.63-.11,8.32-25.38,8.32-25.38s-2.76,37,12.82,32.12c5.38-1.69,3.86-34.83,3.86-34.83s1.58,37.74,14.5,35,11-34.06,11-34.06l.38,25.4s3.24,10.75,8.07,8.53,8.93-35.2,8.93-35.2",
\t "duration": 1000
\t }, {
\t "path": "M351.53,902.73a87.21,87.21,0,0,0-15.47-.05c-6.47.81-7.59,24.57-5.73,29.22s-7.81-19-4.68-27.29c0,0-11.15.41-13.33-1.37s-16.92-.75-17.67-2.54-1,33.38.56,42S289,905.1,291,899.32c0,0-16.79-1.32-19.45-6.68s-19.09,3.49-20.25-2.25-1.6,15.13-1.57,16.93-2.42-19.4-2.42-19.4-13.05-7.38-13.09-10.62-13.33-1.57-13.78-7.89-12.37-10.48-12.83-18-10.3,9.85-9.15,15.23a131.44,131.44,0,0,1,2.37,15.8c0,2.16-3.23,12.48-2,18.84s-6.3-20.17-4.19-23.44.14-9.72-.56-11.87-1.86-16.25-1.86-16.25l2.4-17.25c1.5-10.8-9.59-15.1-13.8-16-3.19-.65-1.06-1.25-.4-1.78,3-2.44,11.16-7.2,9.67-16.18l-1.3-7s-1.37-11.86-.21-15.65,5.68-8.71,9-.66S212.92,788,212.92,788c-1.29-15.64,18.44-33.71,10.46-25.53s-3.46,24.36-2.86,28.67,10.27,1.48,15.67,1.41,10.9,8,17.88,5.16-.48-36.16-.43-32.38,3.5,19.38,6.78,23.12,7.19,13.42,7.19,13.42,14.92,6.74,14.57-.19,7.93-53,5.89-44.36,4.92,45.27,4.9,44.19,9.13-3.36,17.23-3.47,9.71-.67,9.71-.67c-5.83-32.85,14.93-95.19,8.71-75.68s-3.32,75.61,1,75,22.72,4,22.72,4",
\t "duration": 1800
\t }, {
\t "path": "M334.13,1058.6c-24.76,4.8-59.3.72-74.41.92s-13.21-14.29-28.32-14.09-103.78-92.25-112.6-106.3,5.4-.07-8.92-21.12S93.82,875.36,83.5,829.64,51.76,686.78,27,692.7,3.17,685.19,7.29,670.61s22.06-48.91,8.81-71.09-14-78.62-14-78.62,9.72-83.07,27.38-133.14c0,0-42.91-61-24.41-131.38S34.45,3.59,353,3.59",
\t "duration": 600
\t }, {
\t "path": "M137.83,749.62a.2.2,0,0,0-.34.2c1.67,3.36,6.42,11.76,13.69,15.53,7,3.63,8.35,9.34,8.61,11.86a.2.2,0,0,0,.38,0c.93-3.94,2.78-16.11-8.55-20.79C139.25,751.36,140.72,753.16,137.83,749.62Z",
\t "duration": 600
\t }, {
\t "path": "M29.25,692.45s39,6,54.73,19.23c23.64,19.94,58.83,13,71.29,16.61s40.5,5.94,27,59c-13.57,53.48-74,9.06-82.33-9.16s-20.85-66.39-21.91-70.25",
\t "duration": 600
\t }, {
\t "path": "M137.49,749.83s-.78-9.68,9.29-3.61,17.06,4.36,18.5,11.09,4.33,19.37-4.21,27.58,1.26-5.68-18.3-15.95-10.95-31.7-7.44-31.75,14.5,1.43,20.12,4.59,18,3.27,18.21,16.76-1.13,36.72-15.41,38.53-3.08-8.6-18.35-20.54-20.25-21.05-17.4-30,3.83-16.78,19.25-13.75,29.22,5.82,31.71,10.1,13.51,21.21-2,54.17-36.87-12.9-44.75-16.58-20.7-34.81-11.63-42.76,7.18-11.58,13.1-11.29",
\t "duration": 800
\t }, {
\t "path": "M117.17,725.32s-7.34,2.22-8.07,8.44-6.26,16.28.43,32.11S124.1,785.65,126.06,791s14,19.11,17.2,19.95",
\t "duration": 600
\t }, {
\t "path": "M107.51,723.39s-5.83.49-7.59,10.49,0,25.61,4.32,34.61,13.13,31.06,16.31,31",
\t "duration": 600
\t }, {
\t "path": "M99,720.59s-11.83,3.21.19,55.67",
\t "duration": 600
\t }, {
\t "path": "M91.44,716.92s-6.36,2.88-3.58,26",
\t "duration": 600
\t }, {
\t "path": "M71.39,704.2S81.85,810.26,141,816.46,194.11,866,194.11,866",
\t "duration": 600
\t }, {
\t "path": "M64.8,701.53S76.34,781,105,807.09s62.43,11.18,75.83,38c8.65,17.3,16.44,18.46,13.78,43.7",
\t "duration": 600
\t }, {
\t "path": "M188.16,783c-2.86,21.16-15.09,29.25-19.28,31.79a1.38,1.38,0,0,0,0,2.39c6.2,3.61,26.3,14,24.48,24.55",
\t "duration": 600
\t }, {
\t "path": "M56.92,698.88s17.15,65.93,22.35,77.65,21.78,41.8,25,66.37,11.68,79.54,12.22,86.37",
\t "duration": 600
\t }, {
\t "path": "M109.89,918s-7.33-104-36.65-132.14",
\t "duration": 600
\t }, {
\t "path": "M103.79,906.83s-6.07-74.14-25.24-99.39",
\t "duration": 600
\t }, {
\t "path": "M206.21,974.28",
\t "duration": 600
\t }, {
\t "path": "M352.31,961s4.7,90.78-24.67,93.16c-77.05,6.26-78.1-7.6-83.81-11s-5.43-2.09-14.1-4.67-54.49-46.61-54.49-46.61c-17.69-17.35-40.72-40.59-49.93-53.74-5.06-7.23,1.21-6-1.92-11.77-10.3-18.94-11.44-29.64-11.44-29.64",
\t "duration": 600
\t }, {
\t "path": "M343.47,973.18s1.41,58.63-13.82,70.53c-8.66,6.76-28.27,5-60.08,2.6",
\t "duration": 600
\t }, {
\t "path": "M335.3,981.21s-.75,58.32-17.93,58.07c-16.73-.24-38.77,6.68-65.07-17.72-5.33-4.95-10.91-15.88-16.57-23.24-32.05-41.64-42.87-81-59.31-88.54C151.89,898.5,159.64,957.2,195,997.27c41.05,46.55,45.18,25.72-2.4-54.68-10-16.93-40.45-50-9.55,22.52,15.28,35.88,53,60.23,6-17.86-11.57-19.24-18.22-15.46,9.85,32.19",
\t "duration": 600
\t }, {
\t "path": "M191.22,771.79s4.47-27.84-11.64-39S156.49,724.48,124,720.7s-28.28-22.38-79.69-32c-29.76-5.54-19.94-44.54-15.91-63.48S10,583.41,9,553.19,23.72,400.79,47.1,373s46-115,35.34-184.52c-4.61-30.15,3.95-95.49,36.2-119.28C167.73,32.93,213.79,21.05,353,13.31",
\t "duration": 600
\t }, {
\t "path": "M195.39,771.73s14.09-38.58-24.4-51.65-41.72,2.62-65.29-11.64-54.24-29.18-65.32-28.82S35.48,514,47.89,554.3,172.58,677.07,197.44,719.73c10.91,18.73,16.79,17.13,8.32,64.38",
\t "duration": 600
\t }, {
\t "path": "M200.39,779.51s14.17-47.82-21.23-63.74-56.73,4.31-90.31-24.12c-16.07-13.6-31.5-11.68-40.09-16.71-9.36-5.48-10.8-18.62-8.64-54.35C45.44,532.74,39,593.42,108.19,642c28,19.65,40,46.07,59.94,58.14,9.11,6.15,17.58,17.07,19.2,20.45",
\t "duration": 600
\t }, {
\t "path": "M81.51,429s10-30.12,52.64-41.25c39.83-10.41,23.84-11.21,34.58-4s34,7.16,38,7.11,12.08-7.64,8.86-19.14c-5.44-19.47-4.08-28.3,14.48,20.8,0,0,9.24,8.25,15.33,8.66s28.68,21.78,28.2,61.69-9.24,68.1-24.84,76.68-39.88,14.07-40.8,25.2c-.56,6.89-1.85-3.94-1.37-6.41s-31.71,24.7-48.54,17.81-27.66-6-22.05,1c16.48,20.69,27.47,25.81-11.53-10.37-14.84-13.77-55.26-11.92-46.38-89C79.47,465.94,79.68,443.77,81.51,429Z",
\t "duration": 800
\t }, {
\t "path": "M209.66,747s-10.94-27.88-11.18-56.75,1.52-37-.58-44,31.89-51.33,45.28-59.06,37.54-18.46,42.62-42.39,20.1-52.2,20.1-52.2,5.8-29.66-12.59-73.24c-7.52-17.82-19.5-46.16-22.74-46.12S257,370.71,274.13,398s29.54,70.32,22.24,89.84-16.71,42.55-19.21,57S232.33,583.16,223.82,593s-32.86,33.9-32.44,51.17-1.52,45,1.39,55.68c0,0,2.93,17.23,5.55,21.4",
\t "duration": 600
\t }, {
\t "path": "M155.87,662.09s-76.65-71.51-80.32-80.64-19.32-8.92-30.19-55.19.9-95,13-115.68,7.46-48.68,21.75-90.43S92.3,199.63,88.26,179.71,99.76,73.18,165.69,55.89C231.9,38.53,221.55,31.78,353,28.42",
\t "duration": 600
\t }, {
\t "path": "M185,702.7s-4.21-44.55-19.1-63.07-12.67,28.51-4.85,37.59",
\t "duration": 600
\t }, {
\t "path": "M177.08,693.05s-4.55-31.77-9.43-39.21-12.2-15.52-1.09,28.18",
\t "duration": 600
\t }, {
\t "path": "M155.5,649.49s-87.15-72-94.75-101.72-22.87-61.3-4.08-117.55c11.23-33.61,9.34-.84,20.62-73,0,0,15.25-43.74,18.59-90.21s.57-65.86-1.58-92.1S105,90.13,176.55,69.25c69.52-20.28,55.67-27,176.8-28.6",
\t "duration": 600
\t }, {
\t "path": "M165.51,659.61",
\t "duration": 600
\t }, {
\t "path": "M172,688.45",
\t "duration": 600
\t }, {
\t "path": "M159.09,635.37S78.3,580.21,69.31,547.65,48,480.18,61.38,443.83C79.77,393.84,78,386,84.53,366.52s23.12-112.94,21.19-131.71c-1.91-18.6-22.56-84.5,31.44-128.21,24.92-20.18,92.64-53.41,215.85-55",
\t "duration": 600
\t }, {
\t "path": "M85.14,224.74c-24.7,45.68-34.45,95.81-54,99.62C5.38,329.4,18,306.95,18.3,222.74s97.48-84.41,51,22.71S19,331.76,23.87,235.62s70.71-74.41,41,6.65-47.43,80.87-34.3-8.9,51.83-44.95,24,19.47c-40.19,93.17-18.17-16-9.87-40.53s9.19-13.44,9.85,9.23S36.77,285.83,35.9,274.32,50,221.1,50,221.1s4.38-7.56,4.92-2.43",
\t "duration": 600
\t }, {
\t "path": "M10.33,234.07S0,315.82,15.22,328s37.51,12,69.59-87.79",
\t "duration": 600
\t }, {
\t "path": "M.46,293.68s-3.08,50.1,28.42,47.67c16.92-1.3,17,3.55,52-62.78",
\t "duration": 600
\t }, {
\t "path": "M7.57,339.89S18,353.47,29,351.06s30.8-.94,45.8-43",
\t "duration": 600
\t }, {
\t "path": "M11.45,351.54s20.8,23.82,51.32-6.43",
\t "duration": 600
\t }, {
\t "path": "M15.67,362s16.29,14.61,39.2-.52",
\t "duration": 600
\t }, {
\t "path": "M75.92,171.84s-13.4-36.1,24.49-101.35",
\t "duration": 600
\t }, {
\t "path": "M28,171.77s22.55-29.88,45.71-12.92",
\t "duration": 600
\t }, {
\t "path": "M33.37,158.49s21.13-20.43,39.33-9.16",
\t "duration": 600
\t }, {
\t "path": "M37.93,148.59s18.44-13.52,35.5-8.26",
\t "duration": 600
\t }, {
\t "path": "M44.15,136.65s23.9-14.36,31.68-4.46",
\t "duration": 600
\t }, {
\t "path": "M48.64,128.95S67,118.56,77.32,125.39",
\t "duration": 600
\t }, {
\t "path": "M53.28,121.63S74.57,113.2,78.73,120",
\t "duration": 600
\t }, {
\t "path": "M59.7,112.44s13.64-6.09,21.46-.28",
\t "duration": 600
\t }, {
\t "path": "M65.78,104.56s11.81-5.08,17.76-.24",
\t "duration": 600
\t }, {
\t "path": "M72.85,96.28s10.28-6,13.95-.19",
\t "duration": 600
\t }, {
\t "path": "M82.76,86s10.44-2.26,9.39-.12",
\t "duration": 600
\t }, {
\t "path": "M34.25,608.89s-15.5-27.4-16.56-52.57,10.72-141.56,29.74-172.4,20-50.93,20-50.93",
\t "duration": 600
\t }, {
\t "path": "M36,589.92s-17.45-22.1-11.2-66.44,15.53-107.8,21.81-120.83,22.93-36.32,25.72-85.4",
\t "duration": 600
\t }, {
\t "path": "M87.72,562.08",
\t "duration": 600
\t }, {
\t "path": "M91.45,565.05s28,27.34,39,37.27,24.1,21.27,35.22,21.84c5.53.28,12.2,11,15.81,23.54",
\t "duration": 600
\t }, {
\t "path": "M353.75,504.21c-6.2-2.59-18.56,5.79-18.56,5.79s-18.85,18.6-28.87,41.4-33.38,65.89-34.67,80-14.52,87.23-11.73,37.92,17.4-73.69,22.68-83.4S318.95,501,347,493c4.89-1.4,9,2.93,5.4-94.43-3.94-105.73-39.5-139.26-95.82-147.16-91.39-12.82-177.06-119,96.21-126.42",
\t "duration": 600
\t }, {
\t "path": "M353.75,503.43c-2.28,7.63-4.71,11.71-8.77,12.92-15.23,4.52-15.63,15.86-23.07,25.13s-37.82,78.77-44.53,102.06-1.07,37.35-8.88,49.54c-5.73,9-23.75.31-18.37-23.66,9.09-40.53,5.44-51.83,22.15-82.65S310,508.18,317.09,503s29.36-17.66,29.31-45,9.74-182.81-89.09-198.89c-102.25-16.64-128.52-86.21-79.74-112.71s128.23-33.58,175.16-34.56",
\t "duration": 600
\t }, {
\t "path": "M352.74,137.71c-200.55,5.17-218.53,75.44-93.85,103,55.49,12.25,82.65,48.19,94.8,84",
\t "duration": 600
\t }, {
\t "path": "M267.35,573s-23.09,54.81-22.85,72.61-1.41,36.16-1.41,36.16,6.61,30.09-2.9,46.17",
\t "duration": 600
\t }, {
\t "path": "M307.28,517.85s.08-16.12,15-31.43S346,361.7,313.45,337.63s-49.65-31.71-33.91,17.7S310.72,430,311,450.17s2.41,49.35,12,6c11.2-50.88,4.21-98.34-24.6-118.36-30.61-21.28-5.35,26.44,2.72,55.5C318,454.2,322.38,448.1,321.48,411c-.47-19.19-1.56-39-16.36-56-11.76-13.56-9.65-3.51-1.77,20.86,6.4,19.79,10.17,49.24,13,47.78s1.31-30-7-48.57-9.28-9.9-9.28-9.9",
\t "duration": 600
\t }, {
\t "path": "M318.28,352.25",
\t "duration": 600
\t }, {
\t "path": "M253.64,765.31c-3.3-19.08,10-21.45,18.69-35.6s5.06-41.34,6.56-55.14c3.63-33.57,16.2-54.38,16.2-54.38",
\t "duration": 600
\t }, {
\t "path": "M331.48,372.34s-7.28-84.57-74-101.68S121.27,226.48,149.91,161.29,352.74,94.62,352.74,94.62",
\t "duration": 600
\t }, {
\t "path": "M310.18,335.23S298.42,289.16,240,276.46s-138.69-46.32-97.17-123.93c36.55-68.32,210-70,210-70",
\t "duration": 600
\t }, {
\t "path": "M352.74,70.87S197.52,69.21,153,120.31c-29.46,33.81-66.44,88.57,1.81,136.61s78.68,9,137.61,66.5",
\t "duration": 600
\t }, {
\t "path": "M353.35,61.52s-169.61-.36-217.65,59c-29.94,37-45.21,79.61-4,130.21,42.86,52.56,110.2,36.55,141.79,70.4",
\t "duration": 600
\t }, {
\t "path": "M211.41,348.89s10,3.9,12.28,10.36,7.92,27.17,17.16,31.91,35.87,18.75,41.27,59.4-7.68,92.1-38.56,103.84-32.47,14.19-38,24.52,2.63-15.15-5.3-7.76-43.74,13.63-49.44,11,6.21,8.77,8.55,18.46-13.73-2-19.77-9.72-54.77-30.31-64.41-59.6-5.95-56.33-4-69-3.32-26.4,19.17-60.17,73.93-32.83,76.43-31.78,39,24,39.24,3.8S203.59,349.79,211.41,348.89Z",
\t "duration": 600
\t }, {
\t "path": "M188.74,452.5l-27.74.37-13.55,24.2,14.19,23.84,27.74-.37,13.55-24.2Zm-4.2,39.92-18.29.24-9.35-15.72,8.93-16,18.29-.24,9.35,15.72Z",
\t "duration": 600
\t }, {
\t "path": "M 353.69 L 353.69 1066.69",
\t "duration": 600
\t }, {
\t "path": "M306.77,856.13",
\t "duration": 600
\t }],
\t "dimensions": {
\t "width": 355,
\t "height": 1067
\t }
\t }
\t };
\t /*
Setup and Paint your lazyline!
*/
\t $(document).ready(function() {
\t $('#skull').lazylinepainter({
\t "svgData": pathObj,
\t "strokeWidth": 3,
\t "strokeColor": "#89171a",
\t "drawSequential": "false",
\t }).lazylinepainter('paint');
\t });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://lazylinepainter.info/js/jquery.lazylinepainter-1.4.min.js"></script>
<div id="skull"></div>
おかげで働いている、それは私が探しているまさにそれです！何らかの理由で、図面の前半部分だけ何らかの理由でアニメ化されています。思考？ –
いくつかのパスにエラーがあり、それらを削除して動作しているように見えますが、修正することは可能かもしれませんが、パス構文は覚えていません。 –