• A
    User Attivo •

    Come creare logo animato che appare come da link di esempio?

    Ciao, vorrei capire come si deve fare per creare un logo animato che appare come se fosse disegnato linea per linea come nell'esempio:
    http://www.nastri-trasportatori.com/airy/solologo1.html
    L'esempio è quella specie di "A" in alto a sinistra.

    Come è stato creato e gestito l'effetto?

    0
  • N
    User Attivo •

    E' creato in SVG. Purtroppo non sono esperto in materia, quindi non saprei dirti come replicarlo. Prova comunque a cercare più informazioni sull'SVG per farti un idea.

    0
  • A
    User Attivo •

    Ciao, sì si tratta di SVG animato.
    L' animazione è stata creata con http://lazylinepainter.info/
    e il file jpg è diventato un SVG trattabile da lazy.. grazie a http://vectormagic.com/
    che purtroppo dopo 2 prove gratis diventa a pagamento ...

    Ora stò cercando una alternativa a vectormagic ....

    0
  • A
    User Attivo •

    .... aiuto ... 😞
    quì è spiegato benissimo http://blog.teamtreehouse.com/svg-path-animation-with-jquery-and-illustrator
    ma ho fatto 1000 esperimenti e non ci salto fuori, ogni volta ho risultati diversi e inaspettati ... 😞

    Qualcuno riuscirebbe a spiegarmi come procedere esattamente?

    0
  • M
    Moderatore •

    Ciao arluc,

    se hai il logo da animare in formato vettoriale non dovrebbe darti risultati diversi o inaspettati.

    Io l'ho usato alcune volte, è semplicissimo. Importi il disegno in formato SVG e ti dà il codice da implementare per visualizzarlo animato. Dove sta il tuo problema? Hai qualche esempio?

    0
  • A
    User Attivo •

    Ciao MiWebDesign, grazie per la tua attenzione, ho provato ancora in vari modi ma non riesco a saltarci fuori ... ho diversi problemi in vari passaggi ... 😞 ...potresti aiutarmi?

    Ti spiego come faccio, mi correggi quando sbaglio?

    1. scelgo l'immagine da usare come logo: http://i67.tinypic.com/20aphqo.jpg (LOGOCF-SWX4-2.JPG)
    2. http://online.rapidresizer.com/tracer.php inserisco l'immagine prescelta e salvo come LOGOCF-SWX4-2t.svg con l'opzione OUTLINE (quì già avrei un paio di problemi che per il momento tralascio: scritte interne deformate, logo generale troppo grande ma se riduco il jgp RAPIDRESIZER non funziona bene .. )
    3. http://lazylinepainter.info/ inserisco LOGOCF-SWX4-2t.svg e ottengo il codice js
    
/* 
 * Lazy Line Painter - Path Object 
 * Generated using 'SVG to Lazy Line Converter'
 * 
 * http://lazylinepainter.info 
 * Copyright 2013, Cam O'Connell  
 *  
 */ 
 
var pathObj = {
    "LOGOCF-SWX4-2t": {
        "strokepath": [
            {
                "path": "M0 0L0 402L1120 402L1120 0L0 0z",
                "duration": 600
            },
            {
                "path": "M238 65C222.042 49.0417 205.463 35.8543 184 28.054C123.401 6.03076 45.7953 50.313 37.2894 115C30.695 165.15 56.2072 213.774 97 242.279C125.913 262.481 160.852 264.014 195 268.155C243.718 274.063 292.407 281.396 341 288.285C480.544 308.07 620.291 327.462 760 346.282C807.681 352.706 855.378 359.284 903 366.131C929.137 369.889 957.511 376.862 984 374.91C993.519 374.208 1004.41 366.478 1013 362.244C1060.95 338.609 1092.86 282.103 1085.71 229C1077.74 169.859 1026.51 124.939 969 116.427C890.19 104.762 810.215 97.3199 731 88.8341C636.61 78.7226 542.52 64.7136 448 55.9251C401.617 51.6125 355.255 45.38 309 39.8449C298.329 38.5679 286.76 35.8416 276 37.1852C262.495 38.8716 244.207 53.3997 238 65z",
                "duration": 1400
            },
            {
                "path": "M240 215L237.09 113L236 76C229.396 78.5401 224.081 85.5623 217 86.6829C210.628 87.6912 202.379 85.2824 196 84.4244C183.046 82.6819 169.997 81.2264 157 79.8341C144.26 78.4693 123.383 72.9002 112.093 81.5139C83.1824 103.573 97.8678 157.178 118.09 179C140.903 203.618 169.524 206.376 201 210.155C213.906 211.704 226.994 214.732 240 215M301 184L299.972 204.829L283 221C477.427 245.594 671.941 271.224 866 298.576C877.642 300.217 889.326 301.754 901 303.155C930.314 306.674 965.142 317.727 994 307.996C1004.07 304.602 1016.99 298.808 1022.18 288.999C1026.64 280.559 1027.55 271.321 1028.25 262C1028.86 253.713 1027.67 244.903 1025.11 237C1004.37 172.817 936.327 174.532 881 167.715C743.697 150.8 606.3 134.63 469 117.715C425.671 112.377 382.347 107.035 339 101.845C328.663 100.607 318.346 99.2111 308 98.0502C305.443 97.7632 299.934 95.9989 298.117 98.6072C293.882 104.686 299.818 119.475 305.043 123.146C316.002 130.844 337.989 129.589 351 131.05C355.942 131.605 365.059 131.069 366.682 137.055C371.73 155.677 368.712 184.823 345 188.682C331.23 190.923 315.028 184.039 301 184z",
                "duration": 1800
            },
            {
                "path": "M441 175L440 174C437.114 175.451 434.336 176.982 431 176.851C409.645 176.012 419.231 142.901 436 161C442.571 157.235 437.767 152.691 432 151.394C425.514 149.935 418.659 152.41 415.009 158.09C404.635 174.236 429.52 190.416 441 175M445 183C451.103 181.147 450 175.391 450 170C454.237 171.249 458.415 171.775 460 167L450 166L450 159C454.759 159.359 458.384 160.306 460 155C456.367 154.925 450.526 152.942 447.318 155.032C442.005 158.493 445 177.215 445 183M477 162L484 166L485 166L489 163C484.306 156.702 470.897 156.176 473.453 166.985C474.768 172.548 483.556 175.054 483.654 180.808C483.739 185.782 469.931 175.833 473.176 183.961C476.313 191.82 488.23 187.044 488.797 180C489.391 172.628 480.097 167.965 477 162M527 176C531.995 179.238 530 188.617 530 194C536.859 191.918 535.567 179.222 538 173L535 164C529.915 165.542 528.206 171.145 527 176M495 197C503.081 193.939 508.726 176.895 511 169L502 181C500.655 179.033 499.57 177.173 498.59 174.995C497.925 173.52 492.367 163.222 491.527 170.153C490.843 175.797 496.297 181.574 497.261 187C497.87 190.426 495.918 193.779 495 197M520 189L511 189L511 190C515.479 192.941 525.092 192.951 524.338 184.989C523.933 180.71 518.825 177.751 517 174C520.455 175.342 521.598 174.806 524 172C519.138 169.714 510.234 171.498 512.786 178.911C514.108 182.75 518.237 185.246 520 189M561 190C553.966 192.492 550.238 193.166 545 187L546 186C548.331 186.708 550.582 187.078 553.002 187.421C571.282 190.015 552.86 162.579 541.742 180.015C540.405 182.112 539.941 184.542 540.204 187C541.48 198.911 555.943 199.375 561 190M616 175C611.663 183.128 614 195.92 614 205C619.967 201.709 618 192.972 618 187L636 207L637 177C631.033 180.291 633 189.028 633 195L616 175M568 176L566 199C572.668 195.323 567.208 188.12 571.742 183.427C579.273 175.633 580 198.187 580 201C585.67 197.873 584.26 188.855 585 183C595.375 184.159 594 193.854 594 202C600.315 199.904 599.711 184.378 594.772 180.604C590.992 177.717 586.67 180.373 583 182C580.003 176.288 575.39 177.039 570 179L568 176z",
                "duration": 1800
            },
            {
                "path": "M545 182L557 183C553.832 179.104 547.172 175.459 545 182z",
                "duration": 600
            },
            {
                "path": "M683 195L687 196L687 214C691.536 212.494 693.576 197.07 695 192L691 183L683 195M708 191L709 192L715 187C711.185 186.451 709.719 187.595 708 191M661 211C667.344 207.502 665.82 194.158 664 188C659.214 189.348 654.816 185.851 650 187.604C640.639 191.012 638.531 202.678 647.043 208.258C651.532 211.2 658.032 207.056 661 211M728 201C734.125 204.377 732 213.873 732 220L740 198C736.17 195.888 736.049 193.161 736 189L728 201M677 208L672 206L671 206L668 211C673.347 213.208 682.948 211.069 680.214 203.09C679.03 199.634 675.111 196.947 673 194C675.149 194.758 682.156 194.027 677.623 191.042C674.014 188.666 668.664 193.232 668.752 196.997C668.849 201.188 674.568 204.943 677 208z",
                "duration": 1400
            },
            {
                "path": "M648.318 191.746C640.899 195.391 650.521 208.447 657.721 205.242C665.806 201.644 655.7 188.12 648.318 191.746z",
                "duration": 600
            },
            {
                "path": "M698 216L702 198L708 194L707 193L701 193C694.656 196.498 696.18 209.842 698 216M709 217C715.747 213.28 712.403 201.706 714 195C706.148 197.384 709 210.338 709 217M742 221C747.869 217.764 745.897 208.94 747 203L753 199L746 201C741.18 195.91 742 218.014 742 221M773 222C773.645 224.996 776.136 225.457 776.889 221.972C778.125 216.248 778 208.885 778 203C771.967 203.145 765.636 199.159 760.015 202.742C745.554 211.963 759.261 227.822 773 222M790 222L784 220L783 220L780 225C785.08 227.149 795.491 226.477 793.149 218.015C792.072 214.124 787.771 211.639 786 208C788.149 208.758 795.156 208.027 790.623 205.042C786.704 202.462 780.871 207.915 781.752 211.996C782.59 215.881 787.547 219.034 790 222z",
                "duration": 1400
            },
            {
                "path": "M761.148 205.758C752.596 209.325 762.637 223.302 770.682 219.257C778.217 215.468 768.372 202.744 761.148 205.758z",
                "duration": 600
            },
            {
                "path": "M797 236C801.046 234.657 800.953 231.935 801 228C804.553 228.94 808.276 230.531 812 229.562C829.754 224.944 819.34 200.92 802 209C801.355 206.004 798.864 205.543 798.111 209.028C796.323 217.306 797 227.505 797 236M863 218C869.125 221.377 867 230.873 867 237C872.967 233.709 871 224.972 871 219L875 215C871.037 212.807 871.272 210.185 872 206L863 218M833.001 210.742C819.234 216.006 825.894 237.601 839.999 232.397C853.825 227.295 847.157 205.33 833.001 210.742z",
                "duration": 1000
            },
            {
                "path": "M804.318 211.743C796.77 215.538 807.466 229.369 814.682 224.806C822.219 220.041 811.54 208.111 804.318 211.743z",
                "duration": 600
            },
            {
                "path": "M905 223L909 224L909 243L917 220C913.17 217.888 913.049 215.161 913 211L905 223M854 212L851 235C857.214 232.937 854.188 225.178 856.563 220.144C857.948 217.209 861.292 215.828 863 213L856 215L854 212z",
                "duration": 600
            },
            {
                "path": "M832.148 214.758C823.856 218.217 833.09 231.654 840.852 228.393C849.128 224.916 839.73 211.595 832.148 214.758z",
                "duration": 600
            },
            {
                "path": "M897 238L900 241L902 218L899 220C895.881 218.423 892.619 216.516 889 216.63C877.018 217.01 873.304 233.381 884.005 238.821C888.267 240.988 892.829 239.52 897 238M959 223L965 218C960.947 217.393 959.801 219.155 959 223z",
                "duration": 600
            },
            {
                "path": "M884.228 221.743C875.894 225.59 886.512 238.333 893.852 235.243C902.496 231.604 892.341 217.998 884.228 221.743z",
                "duration": 600
            },
            {
                "path": "M927.015 222.742C912.853 228.292 921.102 250.685 934.999 244.552C948.951 238.395 941.472 217.077 927.015 222.742M949 224L946 247C952.078 244.863 948.872 237.946 950.893 233.058C952.314 229.622 956.091 228.16 958 225L951 227L949 224z",
                "duration": 600
            },
            {
                "path": "M926.228 226.746C917.637 230.619 928.168 243.625 935.852 240.393C944.327 236.827 934.083 223.206 926.228 226.746z",
                "duration": 600
            },
            {
                "path": "M959 249C965.67 245.322 963 232.702 963 226C956.33 229.678 959 242.298 959 249z",
                "duration": 600
            }
        ],
        "dimensions": {
            "width": 1120,
            "height": 402
        }
    }
}; 
 
 
/* 
 Setup and Paint your lazyline! 
 */ 
 
 $(document).ready(function(){ 
 $('#undefined').lazylinepainter( 
 {
    "svgData": pathObj,
    "strokeWidth": 2,
    "strokeColor": "#e09b99"
}).lazylinepainter('paint'); 
 });

    e lo inserisco all'interno del codice esistente di scripts.js
    4) copio scripts.js nella cartella del sito di prova: www.nastri-trasportatori.com/prova/js
    5) apro www.nastri-trasportatori.com/prova/index.html e ... invece di vedere la pagina con il logo nuovo (come http://www.nastri-trasportatori.com/airy/index.html ma con il logo nuovo) vedo solo una riga gialla ... :gtsad: :mmm:

    ... perchè? Cosa sbaglio?

    0
  • A
    User Attivo •

    @arluc said:

    ... perchè? Cosa sbaglio?

    Nessuna idea? Nessun aiuto? 😢

    0
Effettua l'accesso per rispondere